Question

如果输入文本为空，如何使用jQuery隐藏textarea？

我的尝试：

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

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

Answer 1

使用keypress或html5 input事件代替输入元素的change事件，并使用jQuery中的toggle()方法切换。

＆＃13;

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

＆＃13;

textarea {
  display: none
}

＆＃13;

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

＆＃13;

代码中的问题：

由于您提供$作为回调参数，它在回调（而不是jQuery）中保存event对象。
更改事件仅在元素更改后失去焦点时触发。
您只是将元素隐藏在回调中，没有代码可以再次显示它。
chnage应为change（我认为这是一个错字）。

Answer 2

您真正的问题是，您使用其他值重新定义$：

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

事件处理程序的第一个参数是jQuery.Event对象，而不是jQuery本身。

从参数列表中删除$并使用value.length == 0它将起作用。

Answer 3

试试这可能对您有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

如果输入为空，如何隐藏textarea

3 个答案: