2017-08-08 170 views
-4

我有一個按鈕,我已經給了類CSS:有沒有辦法停止通過鍵盤點擊按鈕?

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

這意味着它不會完全禁止。所以我仍然可以通過javascript動態地點擊它。 我的問題是,如果我使用我的鍵盤,然後單擊選項卡,我能夠達到按鈕,並在點擊輸入它被點擊。

有沒有辦法通過css禁用鍵盤事件,或使onfocus事件沒有通過?所以我可以將該類添加到按鈕並根據需要刪除,謝謝。

+4

html按鈕已禁用屬性。你爲什麼不使用它? –

+1

嘗試在該按鈕元素上設置「tabindex =」 - 1「'。 – debute

+1

你的意思是你不使用'disabled'屬性的原因是你需要通過JS觸發單元上的單擊事件,但是'disabled'阻止了它的工作?那麼在觸發點擊之前刪除'disabled' _via JS_ ... – CBroe

回答

0

你的意思是

$(".disabled").prop("disabled",true); 
 

 
// and/or 
 

 
$(".disabled").on("click",function(e) { 
 
    console.log("clicked"); 
 
    e.preventDefault() 
 
});
<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>

+0

不想使用禁用的財產! – user2549980

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>

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>

button使用鍵盤將永遠不會獲得焦點,因爲tabindex="-1"

相關問題