Javascript jQuery .focus() 和 .blur() 在 Chrome 或 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3348355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .focus() and .blur() not working in Chrome or Safari
提问by Eric
I am creating a survey form that needs to have each question and set of answers highlighted (by changing the background color) when the user focuses on them. .focus() and .blur() both work in Firefox and IE, but not entirelyin Safari and Chrome. I also tried .focusin() and .focusout() with the same results. EDIT: Clicking does not fire the focus event, but tabbing through the input fields does.I say not entirelybecause it works for text inputs, select inputs and textarea inputs; but not radio and checkbox inputs.
我正在创建一个调查表单，当用户关注它们时，需要突出显示每个问题和一组答案（通过更改背景颜色）。.focus() 和 .blur() 都适用于 Firefox 和 IE，但不完全适用于 Safari 和 Chrome。我还尝试了 .focusin() 和 .focusout() ，结果相同。编辑：单击不会触发焦点事件，但会触发输入字段。我说不完全是因为它适用于文本输入、选择输入和文本区域输入；但不是收音机和复选框输入。
$(document).ready(function()
{
$("form li").focusin(function()
{
$(this).addClass("over");
}).focusout(function()
{
$(this).removeClass("over");
});
});
This is being applied to blocks of html similar to this:
这被应用于与此类似的 html 块：
<li>
<label for="webmail" class="desc">Email</label>
<input type="text" name="webmail" id="webmail" />
</li>
<li>
<label for="business" class="desc">Purpose of your Charter Flight:</label>
<div>
<span>
<input type="radio" name="purpose" id="business" class="radio" />
<label class="choice" for="business">Business</label>
</span>
<span>
<input type="radio" name="purpose" id="pleasure" class="radio" />
<label class="choice" for="pleasure">Pleasure</label>
</span>
</div>
</li>
I tried messing around with toggles, but I am looking for a more elegant solution that doesn't involve using convoluted logic to make it work. Any ideas?
我尝试搞乱切换，但我正在寻找一个更优雅的解决方案，它不涉及使用复杂的逻辑来使其工作。有任何想法吗？
采纳答案by Eric
I thought about it on the drive home last night and figured it out on my own, it may not be the most elegant solution, but it certainly works.
昨晚我在开车回家的路上想了想，自己想出来的，这可能不是最优雅的解决方案，但它确实有效。
$(document).ready(function()
{
$("textarea, input, select, .radio, .checkbox").click(function()
{
$("form li.over").toggleClass("over");
$(this).parents("li").toggleClass("over");
});
});
Thanks anyway!
不管怎么说，还是要谢谢你！
回答by jakeisonline
I also came across this problem a long time ago, and oddly enough it was a radio button giving me the grief.
很久以前我也遇到过这个问题，奇怪的是它是一个单选按钮，让我感到悲伤。
Try using jQuery.change()instead, here's a working example from that problem I had
尝试使用jQuery.change()，这是我遇到的那个问题的一个工作示例
$("input#zendesk-dropbox-askedbefore, input#zendesk-dropbox-newhere").change(function() {
$("label#zendesk-dropbox-label-askedbefore, label#zendesk-dropbox-label-newhere").toggleClass('zendesk-dropbox-label-highlight');
});
In case it's unclear from my crazy use of ID names, input#zendesk-dropbox-askedbefore& input#zendesk-dropbox-newhereare both radio buttons.
如果我对 ID 名称的疯狂使用不清楚，input#zendesk-dropbox-askedbefore&input#zendesk-dropbox-newhere都是单选按钮。
回答by Rikin Adhyapak
// In js area write following method
$('#chkRikin').focus(function() {
alert('Say Hi Rikin');
});
// in html area write following code anenter code hered test it your self
<input type="checkbox" onclick="this.focus()" onblur="yourMethod()" />
it works in google crom
