jQuery將焦點返回到同一輸入字段，以解決無法在所有瀏覽器上運行的錯誤

Question

我有一個包含多個字段的表單，該表單具有動態創建的字段和一些預定義的字段。 該字段之一使用http://jonthornton.github.io/jquery-timepicker/提供的jquery timepicker插件

現在我的問題是，由於模糊不清焦點，我正在對該字段進行快速實時驗證；如果驗證失敗，則顯示錯誤，然后將焦點重新放在該字段上。 現在，我的代碼可以在chrome上正常工作，但在IE 11和Firefox上，不會觸發（inputfiled）.focus（），因此焦點不會重新回到該字段。

這是我的代碼提琴http://jsfiddle.net/8cL42bcy/6/

以下是此處的相同代碼段...

 $(document).ready(function() { // this is used just to highlight where the current focus is on... $("input").focus(function() { $(this).css('background-color', 'rgba(240, 116, 116, 0.69)'); }); $("input").blur(function() { $(this).css('background-color', '#fff'); }); // timepicker plugin courtesy of-- http://jonthornton.github.io/jquery-timepicker/ $('#presentationTime').timepicker({ 'scrollDefault': '08:30 AM', 'disableTimeRanges': [ ['8:01pm', '11:59pm'], ['12am', '7:59am'] ], 'timeFormat': 'h:i A', 'selectOnBlur': true }).on('timeFormatError', function() { if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") { $("#errormsg").css("display", "inline").fadeOut(4000); } $('#presentationTime').val(""); $('#presentationTime').focus(); }).on('timeRangeError', function() { if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") { $("#errormsg").css("display", "inline").fadeOut(4000); } $('#presentationTime').val(""); $('#presentationTime').focus(); }); // end timepicker function $("#field").blur(function() { if ($('#field').val() != "12345") { $("#field").css('outline', 'green dotted thick'); $('#field').val(""); $('#field').focus(); } }); }); 

  #errormsg { display: none; margin-left: 15px; color: red; } .ui-timepicker-list li.ui-timepicker-disabled { /*display: none;*/ font-weight: normal; font-size: 12px; } 

 <link href="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/jquery-ui.css" rel="stylesheet" /> <link href="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/jquery.timepicker.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/js/vendor/jquery.timepicker.min.js"></script> Field 1:: <input type="text" name="textfield" size="25" value="" autofocus>Field 2:: <input type="text" name="textfield" size="25" value=""> <br> <br> <br>time slot:: <input type="text" id="presentationTime" name="presentationTime" size="10" value="" placeholder="HH:mm A"><span id="errormsg">Valid Time required!</span> <br> <br> <br>Filed 4:: <input id="field" type="text" name="textfield" size="25" value="">Field 5:: <input type="text" name="textfield" size="25" value=""> <br> 

現在在Chrome中，行為如下所示...

轉到字段時隙並輸入亂碼，然后跳出或跳出焦點，它會顯示一條消息，並且焦點將重新回到時隙字段。 與field4輸入字段相同。 如果輸入不是“ 12345”，那么它將繪制輪廓，並將焦點移回field4輸入字段。

在FF和IE中，其行為是在無效輸入時，焦點將返回到相同的輸入字段，而是轉到下一個字段。

我要去哪里錯了？

先謝謝您的幫助。

Answer 1

它是Firefox和IE中的一個實現錯誤，您可以使用計時器解決它。 這是新的提琴： http : //jsfiddle.net/8cL42bcy/8/

我添加了setTimeout(function() { $('#field').focus(); }, 50); 在末尾。

因為它已經集中了，所以它不會以任何方式影響Chrome。