jQuery - 检测用户单击输入类型文本字段的OUT

时间:2011-01-03 15:48:49

标签: jquery

我想检测用户何时单击输入类型文本字段的OUT,而不是。

这就是我所拥有的,但两个事件都是在内部点击(焦点)时触发:

<input id="title" val="hello" />

$("#title").focusout(function() {
    console.log('inside');
}).blur(function() {
    console.log('outside');
});

4 个答案:

答案 0 :(得分:60)

您可以绑定focusblur事件,如下所示:

<input id="title" val="hello" type="text" />

$("#title").focus(function() {
    console.log('in');
}).blur(function() {
    console.log('out');
});

focusout没有必要,因为它适用于子元素的事件冒泡:http://api.jquery.com/focusout/

答案 1 :(得分:12)

你可以写一个小插件,比如

(function($){
  $.fn.outside = function(ename, cb){
      return this.each(function(){
          var $this = $(this),
              self = this;

          $(document).bind(ename, function tempo(e){
              if(e.target !== self && !$.contains(self, e.target)){
                  cb.apply(self, [e]);
                  if(!self.parentNode) $(document.body).unbind(ename, tempo);
              }
          });
      });
  };
}(jQuery));

..并使用它:

$('#title').outside('click', function(e) {
    console.log('outside');
});

示例:http://www.jsfiddle.net/tGnun/

答案 2 :(得分:2)

当您在文本外部单击时,看起来focusout()blur()都会触发。请尝试使用focus()。请查看here

答案 3 :(得分:0)

我不是百分之百确定这是你想要的,但这里有一个刺:

<html>
<head>
<title>Example</title>
<script src="jquery-1.4.3.js" type="text/javascript"></script>
</head>
<body id="body">
<script>
    $("document").ready( function() 
    {   $("#body").click( function()
        { alert("body"); } );
        $("#input").click( function(event)
        { alert("input"); event.stopPropagation(); } );
    } );
</script>
<h2>input below</h2>
<input id="input" type="text"/>
</body>
</html>