3

我在这里设置了一个 jsFiddle ，代码如下。

我只有一个文本区域，它在焦点上添加了一个类，在模糊时它被删除了。该类通过设置高度 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");
        }
    });
  });​
4

3 回答 3

3

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

如果您希望文本区域在用户离开表单时缩小，这里有一个需要额外修改的概念。将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");

});

演示（更新）：http: //jsfiddle.net/GzmrS/38/

于 2012-12-17T00:32:24.307 回答
0

Charlietfl 的回答很好，但是还有另外两种方式可以调用模糊事件：如果您转到浏览器中的另一个选项卡，或者如果您点击tab转到下一个输入。你可以在这里看到我的解决方案和代码片段：

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

于 2015-09-15T22:27:45.377 回答
-1

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

由于孩子引起的事件传播，该错误正在引发。只是阻止它。由于孩子引起的事件传播，该错误正在引发。只是阻止它。由于孩子引起的事件传播，该错误正在引发。只是阻止它。

于 2019-11-01T12:26:51.930 回答