javascript - How to detect if user deleted text in input box

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. But it still doesn't work. Any help will be appreciated. Thanks

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. But it still doesn't work. Any help will be appreciated. Thanks

Share Improve this question edited Aug 30, 2017 at 8:24 asked Aug 30, 2017 at 8:17 user8202693 1591 gold badge3 silver badges13 bronze badges

document.getElementById('keyData'). You don't have an element called keyData in your markup, so you can't set its innerHTML. Check your browser console when you're running the code, it would have shown you this error and the line it occurred on. Also using char as a variable name is risky because some standards have it as a future reserved word (developer.mozilla/en-US/docs/Web/JavaScript/Reference/…). – ADyson Commented Aug 30, 2017 at 8:21
1 Why do you have : if (!char) return false; // Special Key Clicked, as the delete key is a special key ? – CCH Commented Aug 30, 2017 at 8:22
try document.getElementById('charInput').onchange= function(){ //then check the length } – bdalina Commented Aug 30, 2017 at 8:24
@ADyson Thanks, I added it. The variable name is just for test but thanks for mentioning, I didn't know that. – user8202693 Commented Aug 30, 2017 at 8:25
@CCH I deleted that line and it stills doesn't work. Thanks – user8202693 Commented Aug 30, 2017 at 8:26

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

Use keyup event and just check the if the value.length is zero

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 />

keypress fires before the value in the textbox is changed. try listening for keyup :

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to detect if user deleted text in input box - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)