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

Question

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

示例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'; 
  }

Answer 1

添加一个监听器到onkeyup. 每当发生键释放时，都会调用一个函数来检查输入字段的值。如果它为空，请将其隐藏。

Answer 2

使用此 keyup 而不是您使用的 keydown 功能

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

在元素中

它会工作

Answer 3

很简单：添加一个事件监听器到onchange. 检查侦听器中的值。如果它为空，则隐藏该按钮。