Question

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

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

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

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

这应该适合你。

检测条形码阅读器输入

1 个答案: