如何检测用户是否在输入框中删除了文本

Question

I have the following code: 我有以下代码：

<!DOCTYPE html>
<html>
    <body>
        <!-- When a user clicks a key provide info on the key clicked -->
        <form action="#" id="sampForm">
            <input id='charInput' type="text">
            <p id="keyData">Key Data Here</p>
        </form><br /><br />

    </body>

<script>

    function getChar(event) 
    { 
      // event.which returns the key or mouse button clicked
      if (event.which == null) {
        // Return the char if not a special character
        return String.fromCharCode(event.keyCode); // IE
      } else if (event.which!=0 && event.charCode!=0) {
        return String.fromCharCode(event.which);   // Other Browsers
      } else {
        return null; // Special Key Clicked
      }
    }

    var all = '';

    document.getElementById('charInput').onkeypress = function(event) 
    {
      var char = getChar(event || window.event)
      if (!char) return false; // Special Key Clicked

      // document.getElementById('keyData').innerHTML = char + " was clicked";
      all += char;
      document.getElementById('keyData').innerHTML = all;
      return true;
    }

</script>

And I tried to do the following: 我试着做以下事情：

document.getElementById('charInput').onkeypress = function(event) 
    {
      var char = getChar(event || window.event)
      if (!char) return false; // Special Key Clicked

      // document.getElementById('keyData').innerHTML = char + " was clicked";
      all += char;
      document.getElementById('keyData').innerHTML = all;
      return true;

      if ( ( (document.getElementById('charInput').value).length) == 0 ) 
      {
            all = '';
      }

    }

What I tried to do is to check the length of the input box and if the length is zero it should reset the variable all. 我试图做的是检查输入框的长度，如果长度为零，它应该重置变量all。 But it still doesn't work. 但它仍然无效。 Any help will be appreciated. 任何帮助将不胜感激。 Thanks 谢谢

Answer 1

Use keyup event and just check the if the value.length is zero 使用keyup事件，只检查value.length是否为零

 function getChar(event) { // event.which returns the key or mouse button clicked // Return the char if not a special character if (event.which === null) return String.fromCharCode(event.keyCode); // IE else if (event.which !== 0 && event.charCode !== 0) return String.fromCharCode(event.which); // Other Browsers return null; // Special Key Clicked } document.getElementById('charInput').onkeyup = function(event) { if (this.value.length === 0) { alert('Empty'); // variable resetting here } }

 <form action="#" id="sampForm"> <input id='charInput' type="text"> </form><br /><br />

Answer 2

keypress fires before the value in the textbox is changed. keypress在文本框中的值更改之前触发。 try listening for keyup : 试着听一下keyup ：

document.getElementById('charInput').onkeyup = function(event) 
{
      //...
}

如何检测用户是否在输入框中删除了文本

问题描述

2 个解决方案

解决方案1
5 已采纳 2017-08-30 08:23:06

解决方案2
0 2017-08-30 08:22:00

如何检测用户是否在输入框中删除了文本

问题描述

2 个解决方案

解决方案1 5 已采纳 2017-08-30 08:23:06

解决方案2 0 2017-08-30 08:22:00

解决方案1
5 已采纳 2017-08-30 08:23:06

解决方案2
0 2017-08-30 08:22:00