检测条形码阅读器输入

Question

如果单击窗体上的任意位置（在弹出窗口中），这是我的代码，重点放在“ text2display”上。 但是，如果他们“标签”并导航到其他地方（例如浏览器网址），如何检测到该问题并将焦点返回到“ 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;
}

这应该适合您。