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

Question

如何使用jQuery在输入文本为空时隐藏文本区域？

我的尝试：

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

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

- Danny

---

jQuery(document).change: 在 input 上使用 change 事件。 - Tushar

如果输入为空，则其值长度为0。0 < 0吗？ - dfsq

Answer 1

使用keypress或HTML5的input事件来替代change事件，针对输入元素使用toggle()方法在jQuery中进行切换。

// 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. 您在回调函数中提供了 $ 参数，它保存了事件对象（不是 jQuery 对象）。
2. change 事件仅在元素失去焦点并且该元素的值已更改时触发。
3. 您仅在回调函数中隐藏了元素，没有代码用于再次显示元素。
4. “chnage”应更正为“change”（我认为这是一个拼写错误）。

- Pranav C Balan

Answer 2

你可以试试这个，可能会有帮助

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

- Nisal Edu

Answer 3

你真正的问题在于你重新定义了$并赋予了另一个值：

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

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

从参数列表中删除$并使用value.length == 0即可正常工作。

- dfsq