鼠標移除後，方便鍵盤友好的方式從複選框標籤中移除焦點樣式

我使用input:focus + label的樣式來以可視方式指示何時使用鍵盤導航對輸入進行了聚焦。鼠標移除後，方便鍵盤友好的方式從複選框標籤中移除焦點樣式

但使用鼠標點擊輸入後，Chrome瀏覽器（也可能不只是Chrome？）仍然存在:focus狀態，這看起來很醜。

我想刪除:focus的造型後點擊而不改變鍵盤導航。即在您點擊標籤後移開鼠標時，它不應再呈紅色。

我已經看到建議.blur()在mouseup上的輸入;但1）它沒有爲我工作（見下面的代碼片段），2）我擔心它會使鍵盤導航脫離其通常的流程。

是的，有人用鼠標點擊一個複選框，然後去鍵盤導航是一個邊緣案例。但這是我想說明的一個問題。

$("label").mouseup(function() { 
 
\t $(this).blur(); // This has no apparent affect. 
 
\t $("#" + this.htmlFor).blur(); // Or this. 
 
});

input:hover + label, input:focus + label { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <p>Form Part One</p> 
 
    <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> 
 
    <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> 
 
    
 
    <p>Form Part Two</p> 
 
    <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> 
 
    <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> 
 
</form>

來源

2017-09-19 mac9416

什麼是獲得焦點後，立即取出聚焦點？這會在用戶點擊鼠標時以任何速度閃爍元素紅色。 – Cruiser

這種風格旨在向用戶表明他們的點擊/按鍵將選擇輸入。從技術角度來看，點擊輸入後，點擊空格鍵會對該輸入產生標準效果，假設用戶使用鼠標導航窗體並且不需要保留懸停/焦點樣式似乎是合理的。我想要一個解決方案，既「鼠標右鍵」，鼠標用戶仍然適用於在鼠標和鍵盤之間來回切換的用戶。 – mac9416

您是否正在尋找一種方法來解決Chrome中的問題，或者您是否在尋找完全不同的實現來完全繞開這個問題？ – TylerH

EDITED基於評論：

//set checkbox hover 
 
$("input").hover(function() { 
 
    $(this).next("label").css("color", "red"); 
 
}, function() { 
 
    $(this).next("label").css("color", "black"); 
 
}); 
 
//set label hover 
 
$("label").hover(function() { 
 
    $(this).css("color", "red"); 
 
}, function() { 
 
    $(this).css("color", "black"); 
 
}); 
 
//set checkbox focusin focusout 
 
$("input").focusin(function() { 
 
    $(this).next("label").css("color", "red"); 
 
    $(this).next("label").siblings().css("color", "black"); 
 
}); 
 
//set checkbox label active on click 
 
$('input:checkbox').on('click', function() { 
 
    $(this).next('label').toggleClass('active'); 
 
}); 
 
//set radio label active on click 
 
$('input:radio').on('click', function() { 
 
    $(this).next('label').toggleClass('active'); 
 
    $(this).siblings().next('label').removeClass('active'); 
 
});

.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <p>Form Part One</p> 
 
    <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> 
 
    <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> 
 
    <p>Form Part Two</p> 
 
    <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> 
 
    <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> 
 
</form>

來源

2017-09-27 15:43:16 Syden

我覺得我的措辭不清楚。基本上，最終目標是在鼠標按鈕出現後使標籤不再變紅。 – mac9416

好吧。鼠標按鈕出現後，你不再徘徊。 – mac9416

@ mac9416，上面編輯，讓我知道如果這有效。 – Syden

我可能會在這裏誤解你，但我認爲問題是，你把你的事件觸發了錯誤的元素。在您的html結構中，輸入是標籤的父項，並且是mouseup事件應該觸發的活動元素。


 

 
$("input").mouseup(function() { 
 
\t $(this).blur(); // This has no apparent affect. 
 
\t $("#" + this.htmlFor).blur(); // Or this. 
 
});

input:hover + label, input:focus + label { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <p>Form Part One</p> 
 
    <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> 
 
    <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> 
 
    
 
    <p>Form Part Two</p> 
 
    <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> 
 
    <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> 
 
</form>

來源

2017-09-19 18:33:10

謝謝！這很有道理，但如果通過單擊標籤來選擇輸入，它不會移除焦點樣式。 – mac9416

這解決了大綱不會消失的問題，但不是仍然能夠使用鍵盤操作單擊元素的問題。任何涉及「blur（）」的解決方案都會弄亂鍵盤導航。 –

奇怪的是，即使在blur（）之後，Rory，Lowther的片段仍然像Tab一樣導航。如果您單擊一個單選按鈕，然後嘗試使用鍵盤箭頭鍵更改選擇，它不起作用...但Tab導航無論如何都是我的首要關注點。 – mac9416

當您在標籤上點擊複選框，將焦點轉移到複選框。但是，在mouseup事件偵聽器觸發時焦點不會被傳輸。所以你清除了對錯誤元素的關注，並且即使你已經嘗試清除正確元素的焦點，該元素仍然沒有焦點。

您可以通過在複選框上添加一個瞬時焦點事件偵聽器來立即清除您的mouseup偵聽器中的焦點，從而達到您正在尋找的效果。這隻會在複選框收到焦點時觸發，並且只會在出現mouseup事件時觸發，因此不會干擾鍵盤用戶。

$("label").mouseup(function() { 
 
    $(this.previousElementSibling).one('focus', function() { 
 
     $(this).blur(); // This has an apparent affect. 
 
    }); 
 
});

input:hover + label, input:focus + label { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <p>Form Part One</p> 
 
    <input type="checkbox" id="cb1" name="cb" /><label for="cb1">First Checkbox</label><br> 
 
    <input type="checkbox" id="cb2" name="cb" /><label for="cb2">Second Checkbox</label> 
 
    
 
    <p>Form Part Two</p> 
 
    <input type="radio" id="r1" name="r" /><label for="r1">First Radio</label><br> 
 
    <input type="radio" id="r2" name="r" /><label for="r2">Second Radio</label> 
 
</form>

來源

2017-09-27 23:18:16

鼠標移除後，方便鍵盤友好的方式從複選框標籤中移除焦點樣式

回答

相關問題