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

ブラーは別の要素でのマウス イベントの前に発生するため、ブラーと戦うのは簡単ではありません。

ユーザーがフォームを離れたときにテキストエリアを縮小したい場合は、追加の変更が必要になる 1 つの概念を次に示します。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 の回答は適切ですが、blur イベントを呼び出す方法は他にも 2 つあります。ブラウザの別のタブに移動する場合と、ヒットtabして次の入力に移動する場合です。ここで私のソリューションとコード スニペットを確認できます。

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

于 2015-09-15T22:27:45.377 に答える