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

Posted 2023-05-07

【中文标题】如果输入为空，如何隐藏文本区域

【英文标题】：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？

【参考方案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>