使用onBlur事件的问题 [英] Issues with using onBlur event

问题描述

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

I have taken a look around stackoverflow on the topic of onblur but so far have not been able to locate an approach to solve what I want to do.

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

What I have is a simple two column tables with an unknown number of rows. Rows are created at render time based on the number of boxes being shipped. Each column has the following name and id for the input box:

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

For column 1: shipItems[ rowNum ].barcode For column 2: shipItems[ rowNum ].trackingcode

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

Pretty straight forward. What I want to do is validate the trackingcode and if in error alert the user and re-focus the cursor on the column/row that caused the problem. Users will be using a scanner to scan in the information.

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

Every things works except that I can not get the cursor to go back to the column/input that caused the issue in the onBlur event.

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

My understanding is that when the onBlur event fires the element is losing focus and thus the focus is being transferred to the new/next element.

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

I have tried to playing around with the onfocus event, onkeypress events but still have not been successful.

我是对任何完成这项工作的理想开放，我已经花了很多时间在它上面。 JQuery不是问题或只是计划旧的JavaScript。

I am open to any ideal to get this done, I have spend way to much time on it as it is. JQuery is not out of the questions or just plan old javascript.

更新

以下是 jsFiddle ：

推荐答案

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

After reviewing your code, best I can tell you are experiencing an unusual bug in jQuery. I have seen some quirky things happen when using focus() (like having to use setTimeout). But, in your case the $(this) is somehow not resolving correctly when calling focus().

起初我以为是因为 id 不遵循HTML-4标准，而是纠正 id 没有帮助。 $（this）仍未能集中注意力，尽管它正确引用了< input> 元素。然后我尝试用jQuery识别id作为字符串 $（'＃+ thisId +'） ...仍然无效。但是，硬编码 id 确实有效......

At first I thought it was because the id is not following HTML-4 standards, but correcting the id did not help. $(this) still failed to focus, despite the fact it correctly refers to the <input> element. Then I tried identifying the id with jQuery as a string $("'#" + thisId + "'")...still did not work. But, a hard coded id did work...

所以，这里是如何我修改你的代码并解决问题以使其集中注意力

So, here's how I modified your code and worked around the problem to get it to focus

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');
}

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

Feel free to look at the fiddle (linked above). This approach does correct the focus problem.

这篇关于使用onBlur事件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！