我围绕onblur主题对stackoverflow进行了研究,但到目前为止,还没有找到解决我想要做的事情的方法。
我只有一个简单的两列表,行数未知。在渲染时会根据要运送的盒子数量创建行。每列的输入框都有以下名称和ID:
对于列1:shipItems [rowNum] .barcode
对于第2列:shipItems [rowNum] .trackingcode
非常简单。我想做的是验证跟踪代码,如果错误提示用户,然后将光标重新放在引起问题的列/行上。用户将使用扫描仪扫描信息。
一切正常,除了我无法使光标返回到导致onBlur事件中问题的列/输入。
我的理解是,当onBlur事件触发时,该元素将失去焦点,因此焦点将转移到new / next元素。
我曾尝试过onfocus事件,onkeypress事件,但仍然没有成功。
我对实现这一目标的理想持开放态度,我已经花了很多时间在它上面。 jQuery并非不可能,也不是只是计划旧的javascript。
更新
这是jsFiddle上脚本的链接:
最佳答案
在检查完您的代码之后,最好的通知是您在jQuery中遇到了一个异常错误。我已经看到使用focus()
时会发生一些奇怪的事情(例如必须使用setTimeout)。但是,在您的情况下,调用$(this)
时focus()
无法正确解析。
起初我以为是因为id
没有遵循HTML-4标准,但是更正id
并没有帮助。尽管$(this)
正确引用了<input>
元素,但仍然无法聚焦。然后,我尝试使用jQuery将ID标识为字符串$("'#" + thisId + "'")
...仍然不起作用。但是,硬编码的id
确实起作用了...
因此,here's how我修改了您的代码,并解决了该问题,以使其重点突出。
if( null === $text.match(/\b(1Z ?[0-9A-Z]{3} ?[0-9A-Z]{3} ?[0-9A-Z]{2} ?[0-9A-Z]{4} ?[0-9A-Z]{3} ?[0-9A-Z]|[\dT]\d\d\d ?\d\d\d\d ?\d\d\d)\b/))
{
alert("No Match");
//$(this).focus();//don't use jquery $this
var thisId = $(this).attr('id');//get the id
//use the setTimeout workaround for firefox
setTimeout(function() {
document.getElementById(thisId).focus();//use javascript to set focus
},0);
$(this).css('background-color','Red');
}
随意看看小提琴(上面有链接)。这种方法确实可以解决焦点问题。
关于javascript - 使用onBlur事件的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8141239/