javascript - 使用 onBlur 事件的问题

Question

我以 onblur 为主题浏览了 Stack Overflow，但到目前为止还没有找到解决我想做的事情的方法。

我有一个简单的两列表，行数未知。行是在渲染时根据运送的箱子数量创建的。每列都有以下输入框的名称和id:

对于第 1 列:shipItems[ rowNum ].barcode
对于第 2 列:shipItems[ rowNum ].trackingcode

非常简单。我想要做的是验证 trackingcode 并且如果错误提醒用户并将光标重新聚焦在导致问题的列/行上。用户将使用扫描仪扫描信息。

一切正常，除了我无法让光标返回到导致 onBlur 事件出现问题的列/输入。

我的理解是，当 onBlur 事件触发时，元素正在失去焦点，因此焦点正在转移到新的/下一个元素。

我试过 onfocus 事件、onkeypress 事件，但仍然没有成功。

我对完成这项工作的任何理想持开放态度，我已经在它上面花费了很多时间。 JQuery 并非没有问题或只是计划旧的 Javascript。

---

更新

这是 jsFiddle 上脚本的链接:

Answer 1

在检查您的代码后，我最好告诉您您遇到了 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');
}

请随意查看 fiddle (上面链接)。这种方法确实纠正了焦点问题。