当文本从输入中完全删除时，请执行某些操作

Do something when text is completely removed from an input

本文关键字：执行 操作 删除 文本 输入      更新时间：2023-09-26

我正试图创建一个可以用另一个输入清除的输入，但当用退格键/删除键删除/擦除文本时，清除按钮必须隐藏。

示例http://jsfiddle.net/FzVhW/

我有办法做到吗？

HTML:

  <form action="#" id="cse-search-box" METHOD="GET">
    <div>
      <input type="text" name="q" id="q" value="some value" size="35" autocomplete="off" onfocus="if (this.value == '') { document.getElementById('search_form_input_clear').style.background='#FFFFFF' };" onkeydown=" document.getElementById('search_form_input_clear').style.background='#000000'">
      <input id="search_form_input_clear" class="search_form_input_clear" type="button" value="X" OnClick="document.getElementById('q').value=''; document.getElementById('q').focus();" style="background: #FFFFFF; border: none; font-weight: bold; color: #FFFFFF;">
      <input type="submit" value="Search" class="submit" />
    </div>
  </form>

JavaScript:

  var clearbut = document.getElementById('search_form_input_clear');
  var searchfield = document.getElementById('q');
  if (searchfield.value != '') {
      clearbut.style.background='#000000'; 
  }
  else if (searchfield.value === '') {
      clearbut.style.background='#FFFFFF'; 
  }

使用此keyup而不是使用的keydown函数

onkeyup="if (this.value == '') { document.getElementById('search_form_input_clear').style.background='#FFFFFF' };"

在元素中

它将工作

向onkeyup添加侦听器。当发生密钥释放时，会调用一个函数来检查输入字段值。如果它为空，则将其隐藏。

Simple：向onchange添加一个事件侦听器。检查侦听器中的值。如果它是空的，隐藏按钮。

相关文章：