jquery 焦点回到相同的输入字段，错误不适用于所有浏览器

Posted 2023-05-09

【中文标题】jquery 焦点回到相同的输入字段，错误不适用于所有浏览器

【英文标题】：jquery focus back to the same input field on error not working on all browsers

【发布时间】：2015-01-20 05:05:43

【问题描述】：

我有一个包含多个字段的表单，其中包含动态创建的字段和一些预定义的字段。其中一个字段使用由http://jonthornton.github.io/jquery-timepicker/ 提供的 jquery timepicker 插件

现在我的问题是我正在对该字段进行快速实时验证，因为它模糊不清，如果验证失败，则显示错误并将焦点带回该字段。现在我的代码在 chrome 上可以正常工作，但在 IE 11 和 Firefox 上， (inputfiled).focus() 不会被触发，因此焦点不会被带回现场。

这是我的代码小提琴http://jsfiddle.net/8cL42bcy/6/

下面是同样的代码sn-p here...

$(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 中，行为如下...

tab 到字段 time-slot 并输入 gibberish 并 tab out 或 focus out，它会显示一条消息，并且焦点会回到 time-slot 字段上。与 field4 输入字段相同。如果输入不是“12345”，则绘制轮廓并将焦点带回 field4 输入字段。

在 FF 和 IE 中，行为是在无效输入时，焦点回到相同的输入字段，而是转到下一个字段。

我哪里出错了？

提前感谢您的帮助。

【参考方案1】：

这是 Firefox 和 IE 中的一个实现错误，您可以使用计时器解决它。 这是新的小提琴：http://jsfiddle.net/8cL42bcy/8/

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

它不会以任何方式影响 Chrome，因为已经有焦点了。