检测条形码阅读器输入

如果单击表单上的任何位置（在弹出窗口中），这里是我的代码，专注于“text2display”。 但是，如果他们“选项卡”并导航到其他地方（例如浏览器url），如何检测并将焦点返回“”text2display“？

$("#barcode_form").click(function(){ var focusedElement = ""; $(":focus").each(function(){ focusedElement = $(this).attr("id") }); if(focusedElement == ""){ $('#text2display').focus() } }) 

Answer 1

你会想要.blur（）; function。 每当元素具有“焦点”并且用户离开“聚焦”项时，调用“模糊”并将事件发送回元素。 一个例子。

 if(focusedElement == ""){ //if our focused element is empty $('#text2display').live('blur', function(){ //when the target loses focus, we invoke blur, the next line focuses again. //it's also a best practice to do something like fading in the border, $("#text2display").focus(); }); } 

此外，如果我建议，让用户知道他们的焦点已经返回到该元素是个好主意。 执行此操作的最佳方法是执行类似添加“红色”边框，然后淡出边框的操作。 一种方法如下 – >

 if(focusedElement == ""){ //if our focused element is empty $('#text2display').live('blur', function(){ //when the target loses focus, we invoke blur, the next line focuses again. //it's also a best practice to do something like fading in the border, $("#text2display").focus(function(){ $(this).animate({ //when the element has been re-focused, we'll give it a red border briefly. borderColor: '#ff0000'; }, function(){ //once the animation completes, fade the border out $(this).animate({ borderColor: 'transparent' }, 2000); } ); }); }); } 

另外，因为我们不想resize问题，所以我们需要在输入中添加一些CSS

 input{ border:1px solid transparent; } 

这应该适合你。