Question

我已经设置了一个jsFiddle here，代码如下。

我只有一个textarea，它会在焦点上添加一个类，并且模糊它会被删除。该类通过设置高度css属性来扩展textarea，因此当您单击按钮提交表单时，我不希望它删除该类，因为它看起来很尴尬。

HTML

<div class="comment_display">
    <form>
        <textarea class="addcomment"></textarea>
        <input class="tagbtn" type="submit" value="Comment" />
    </form>            
</div>

CSS

.addcommentOn {
    height: 100px;
}

的Javascript

// Lengthen the Discussion input on click
  $(function lengthenInput() {
    $(".addcomment").focus(function() {
        $(this).addClass("addcommentOn");
    });

    $(".addcomment").blur(function() {
        if ($("input.comment").data('clicked') != true) {
            $(this).removeClass("addcommentOn");
        }
    });
  });

Answer 1

尝试与模糊战斗并不容易，因为它发生在另一个元素上的任何鼠标事件之前

如果您希望textarea在用户离开窗体时缩小，则需要进行其他修改的概念。将blur处理程序替换为以下内容：

$('form').on('click', function(evt) {
    var $tgt = $(evt.target);
     if ($tgt.is('input[type="submit"]') || $tgt.is('.addcommentOn')  ) {
          return;
      }else{
           $('.addcommentOn').not($tgt).removeClass("addcommentOn");
      }
})

编辑：还需要再次修改focus处理程序，然后再添加一个元素：

 $(".addcomment").focus(function() {
    $('.addcommentOn').removeClass('addcommentOn');
    $(this).addClass("addcommentOn");

});

DEMO（已更新）：http://jsfiddle.net/GzmrS/38/

Answer 2

Charlietfl的答案很好，但是还有另外两种方法可以调用模糊事件：如果你转到浏览器中的另一个标签，或者你点击tab转到下一个输入。您可以在此处查看我的解决方案和代码段：

https://stackoverflow.com/a/32596535/1895428

Answer 3

https://i.stack.imgur.com/2qfhd.jpg

该错误是由于子项引起的事件传播而引发的。只是防止它。由于由孩子引起的事件传播，该错误正在增加。只是防止它。由于由孩子引起的事件传播，该错误正在增加。只是防止它。

jQuery模糊除了某些元素

3 个答案: