检测条形码阅读器输入 [英] detect barcode reader input

问题描述

这是我的代码，如果单击窗体上的任意位置(在弹出窗口中)，则将重点放在"text2display"上.但是，如果他们标签"并导航到其他地方(例如浏览器网址)，如何检测到该问题并将焦点返回到"text2display""?

here is my code to focus on "text2display" if clicked anywhere on the form (which is in a popup). but, how if they "tab" and navigate elsewhere (e.g. browser url), how to detect that and return focus back to ""text2display"?

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

推荐答案

您将需要.blur();.功能.每当元素具有焦点"并且用户离开焦点"项时，就会调用模糊"并将事件发送回该元素.一个例子.

You'll be wanting the .blur(); function. Whenever an element has "focus" and the user leaves the "focused" item, "blur" is invoked and sends an event back to the element. An example to follow.

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

此外，如果我可以建议的话，最好让用户知道他们的焦点已经回到该元素上.做到这一点的最佳方法是执行类似添加红色"边框，然后使该边框逐渐淡出的操作.一种方法如下->

Also, if I may suggest, it would be a good idea to let the user know that their focus has returned to that element. The best way to do this is to do something like adding a 'red' border, then fading that border out. One way is as follows ->

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

Also, because we don't want resizing issues, we need to add some CSS to our inputs

input{
  border:1px solid transparent;
}

这应该适合您.

这篇关于检测条形码阅读器输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！