代码之家 › 专栏 › 技术社区 › Corey Sunwold

jQuery focusin和focusout实时事件未触发

jquery

Corey Sunwold · 技术社区 · 14 年前

jQuery版本:1.4.1

; (function($) {

    $.fn.watermark = function(text) {

        return $(this).each(function() {
            $(this).live('focusout', function() {
                if (this.value == "") {
                    this.value = text;
                }

                return false;
            });

            $(this).live('focusin', function() {
                if (this.value == text) {
                    this.value = "";
                }

                return false;
            });
        });
    }

})(jQuery);

我可以不用现场直播就让它工作。此代码不起作用:

; (function($) {

    $.fn.watermark = function(text) {

        return $(this).each(function() {
            $(this).focusout(function() {
                if (this.value == "") {
                    this.value = text;
                }

                return false;
            });

            $(this).focusin(function() {
                if (this.value == text) {
                    this.value = "";
                }

                return false;
            });
        });
    }

})(jQuery);

3 回复 | 直到 14 年前

Nick Craver 14 年前

.live() 需要一个选择器而不是DOM元素,在调用它的地方,它只在DOM元素上,所以不是这样:

$(this).each(function() {
        $(this).live('focusout', function() {

试试这个( this 已经是jQuery对象):

this.live('focusout', function() {

它需要这个是因为 .live() 当一个事件达到 document 只有 .live() 反正也没什么意义:)

Community CDub 8 年前

看看这里。

Simulating "focus" and "blur" in jQuery .live() method

KingRider 8 年前

尝试:

$(document).ready(function(){
  $('input[type=search]').bind('focusin', function(){
    $(this).animate({width: '300px'}, 500);
    $('svg.magnifier').hide();
    $('svg.cancel').show();
  }).bind('focusout', function(){
    $('svg.cancel').hide();
    $('svg.magnifier').show();
    $(this).animate({width: '100px'}, 500);
  });
});

div.box_block {
  position: relative;
}
input[type=search] {
  width: 100px;
  padding: 10px 10px 10px 30px;
}
/* --
  SVG - https://www.iconfinder.com/iconsets/ionicons
----- */
svg {
  position: absolute!important;
  left: 10px;
  transform: translateY(55%);
  top: 0;
}
svg.cancel {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box_block">
  <input type="search" placeholder="Search">
  <svg class="cancel" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
  <svg class="magnifier" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3  c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2  c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2  c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>
</div>