有没有办法通过键盘点击停止按钮?

时间:2017-08-08 09:27:38

标签: javascript jquery html css

我有一个按钮,我用CSS给了这个类:

.disabled{
    pointer-events: none ;
    opacity: 0.6 ;
}

这意味着它不会被完全禁用。所以我仍然可以通过javascript动态点击它。 我的问题是,如果我使用键盘并单击Tab键,我就可以到达按钮,点击输入后会点击它。

有没有办法通过css禁用键盘事件,或使onfocus事件无效?所以我可以将该类添加到按钮并根据需要删除,谢谢。

3 个答案:

答案 0 :(得分:2)

您可以使用解决方案https://jsfiddle.net/pj3heuso/



$('button').click(function(){
   console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit">
Submit 1
</button>

<button type="submit" tabindex="-1">
Submit 2
</button>
&#13;
&#13;
&#13;

由于button

,第二个tabindex="-1"永远不会使用键盘获得焦点

答案 1 :(得分:0)

你的意思是

&#13;
&#13;
$(".disabled").prop("disabled",true);

// and/or 

$(".disabled").on("click",function(e) { 
  console.log("clicked"); 
  e.preventDefault() 
});
&#13;
<input type="text" placeholder="Tab to the button" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="disabled">Click</button>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你可以这样打电话给你的按钮

The disabled attribute is a boolean attribute. When present, it specifies that the element should be disabled.A disabled element is unusable.The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.

<button type="button" class="disabled" disabled>click</button>

尝试使用此代码段

.disabled{
    pointer-events: none ;
    opacity: 0.6 ;
}
<button type="button" class="disabled" disabled>click</button>