Question

我已经看了一下关于onblur主题的stackoverflow，但到目前为止还没能找到解决我想要做的事情的方法。

我所拥有的是具有未知行数的简单两列表。根据发货的箱数在渲染时创建行。每列的输入框都有以下名称和ID：

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

非常直接。我想要做的是验证跟踪代码，如果错误警告用户，并将光标重新聚焦在导致问题的列/行上。用户将使用扫描仪扫描信息。

除了我无法让光标返回导致onBlur事件中的问题的列/输入外，每件事情都有效。

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

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

我愿意接受任何理想，我已经花了太多时间在它上面。 JQuery不是问题，也不只是计划旧的javascript。

更新

以下是jsFiddle上脚本的链接：

Answer 1

在审核完代码之后，我可以告诉您在jQuery中遇到一个不寻常的错误。我看到使用focus()时会发生一些奇怪的事情（比如必须使用setTimeout）。但是，在您的情况下，$(this)在调用focus()时无法正确解析。

起初我认为这是因为id没有遵循HTML-4标准，但纠正id并没有帮助。 $(this)仍未能集中注意力，尽管它正确引用了<input>元素。然后我尝试用jQuery作为字符串$("'#" + thisId + "'")来识别id ...仍然无效。但是，硬编码的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');
}

随意看看小提琴（上面链接）。这种方法确实纠正了焦点问题。

Answer 2

我想出了这个问题。事实证明，IE和FireFox在onBlur上的行为非常不同。

我在执行blur（）期间调用focus（）。由于模糊尚未完成，因此忽略焦点命令或执行然后完成模糊。

某些浏览器的focus命令会导致模糊被触发，从而在光标在两个字段之间反弹时创建一个无限循环。

使用超时将导致焦点在模糊回调功能之外触发。

在IE下我可以使用onBlur并且没有问题，在FF下，焦点永远不会被称为超时事件，因此它需要一个onChange。

我更新了我的脚本 - 它在IE上运行正常 - http://jsfiddle.net/boyd4715/3wbtQ/34/

使用onBlur事件的问题

2 个答案: