gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:49:08 24 4
gpt4 key购买 nike

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

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

这是我的代码 fiddle 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 中,行为如下...

按 Tab 切换到时隙字段并输入乱码,然后按 Tab 键退出或焦点移出,它会显示一条消息,并且焦点返回到时隙字段。与 field4 输入字段相同。如果输入不是“12345”,则它会绘制轮廓并将焦点带回 field4 输入字段。

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

我哪里出错了?

预先感谢您的帮助。

最佳答案

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

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

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

关于javascript - jquery 焦点回到相同的输入字段,错误不适用于所有浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27071752/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com