如果输入为空，如何隐藏文本区域答案

【问题标题】：How to hide textarea if input is empty如果输入为空，如何隐藏文本区域
【发布时间】：2018-05-21 07:29:08
【问题描述】：

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

我的尝试：

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

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

【问题讨论】：

jQuery(document).chnage：在input上使用change事件。
如果输入为空，则其值长度为0。是0 < 0？

标签： javascript jquery input textarea show-hide

【解决方案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>

代码中的问题：

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

【讨论】：

【解决方案2】：

你真正的问题是你用另一个值重新定义$：

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

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

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

【讨论】：

【解决方案3】：

试试这个可能对你有帮助

$('#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>

【讨论】：