检测条形码阅读器输入

Question

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

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

Answer 1

你会想要 .blur();功能。每当元素具有“焦点”并且用户离开“焦点”项目时，都会调用“模糊”并将事件发送回元素。一个可以效仿的例子。

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

另外，因为我们不想调整大小问题，我们需要在输入中添加一些 CSS

input{
  border:1px solid transparent;
}

这应该很适合你。