我围绕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/

10-16 13:09
查看更多