如何检测，如果用户在输入框中删除文本

问题描述：

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

我试着做到以下几点：

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 = ''; 
     } 

    }

我试图做将检查输入框的长度，如果长度为零，则应重置所有变量。但它仍然无法正常工作。任何帮助将不胜感激。谢谢

'的document.getElementById（ 'KEYDATA'）'。您的标记中没有名为keyData的元素，因此您无法设置其innerHTML。当您运行代码时请检查您的浏览器控制台，它会向您显示此错误及其发生的线路。另外使用'char'作为变量名是有风险的，因为有些标准将它作为未来的保留字（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar）。 – ADyson

为什么你有：'如果（！char）返回false; //特殊键单击'，因为删除键_is_是一个特殊的键？ – CCH

尝试document.getElementById（'charInput'）。onchange = function（）{//然后检查长度} – bdalina

答

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

非常感谢，整理出来。 – user8202693

答

keypress火灾之前文本框中的值被更改。尝试监听keyup：

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

如何检测，如果用户在输入框中删除文本

相关推荐