入力が空の場合にテキストエリアを非表示にする方法

Question

入力テキストが空の場合、jQueryを使用してテキストエリアを非表示にするにはどうすればよいですか？

私の試み：入力要素の代わりに、変更イベントの

jQuery(document).chnage(function($) { 
    var value=$.trim($('input').val()); 

    if (value.length < 0) { 
     $('textarea[name="your-message"]').hide(); 
    } 
}); 

Answer 1

使用keypressまたはHTML5 inputイベントとjQueryでtoggle()方法を使用して切り替えます。あなたのコード内

// bind input event handler 
 
$('input').on('input', function() { 
 
    // toggle visible state based on value 
 
    $('textarea[name="your-message"]').toggle(this.value.trim() !== ''); 
 
});

textarea { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<textarea name="your-message"></textarea>

---

問題：

1. あなたは、コールバックのparamとして$を提供しているので、それはコールバック（ないjQueryの）内部でeventオブジェクトを保持しています。
2. 変更イベントは、値が変更された後に要素がフォーカスを失った場合にのみ発生します。
3. 要素をコールバック内に隠しているだけで、コードを表示し直して再度表示することはありません。
4. chnageはchangeである必要があります（私はそのタイプミスだと思います）。イベントハンドラの最初のパラメータは、jQuery.Eventオブジェクトではなく、jQueryの自分自身をあることを行っている

   jQuery(document).change(function($) { 
       // remove this bad boy -------^ 
       // $ is jQuery.Event object here 
   }); 
   

   ：

Answer 2

あなたの本当の問題は、あなたが$と別の値を再定義することです。

$をパラメータリストから削除し、value.length == 0を使用すると動作します。 input` `上_change_イベントを使用します。

Answer 3

が、これは.chnage`あなた

$('#txtID').on('input', function() { 
 
if(this.value.trim() !== ''){ 
 
$('#txtID').show(); 
 

 
}else{ 
 
$('#txtID').hide(); 
 

 
} 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<textarea rows="4" cols="50" id="txtID"></textarea>