在JavaScript中捕获*所有*显示字符？

最近，我收到一个不寻常的请求，我遇到了最困难的寻址问题，这涉及到在文本框中键入时捕获所有显示字符。设置如下：

我有一个文本框，其最大长度为10个字符。当用户尝试键入超过10个字符时，我需要通知用户他们键入的字符数超出了字符数限制

最简单的解决方案是指定maxlength为11，在每个keyup上测试长度，并将其截断回10个字符，但此解决方案似乎有点笨拙。我更愿意做的是在keyup之前捕获角色，并根据它是否是显示角色，向用户显示通知并阻止默认操作

由于我们处理大量的国际数据，所以白名单将是一个挑战

我已经使用了键下、按键和键上的每一个组合，阅读了事件.keyCode、事件.charCode和事件。这些组合，但我找不到一个组合可以在所有浏览器中使用。我所能管理的最好的方法是在>=IE6、Chrome5、FF3.6中正常工作，但在Opera中失败：

注意：以下代码使用jQuery

$(function(){
  $('#textbox').keypress(function(e){
    var $this = $(this);
    var key = ('undefined'==typeof e.which?e.keyCode:e.which);
    if ($this.val().length==($this.attr('maxlength')||10)) {
      switch(key){
        case 13: //return
        case 9:  //tab
        case 27: //escape
        case 8:  //backspace
        case 0:  //other non-alphanumeric
          break;
        default:
          alert('no - '+e.charCode+' - '+e.which+' - '+e.keyCode);
          return false;
      };
    }
  });
});

---

我承认我所做的可能是过度设计了解决方案，但现在我已经投入了资金，我想知道一个解决方案

既然您已经在使用JQuery，

.validate（）

对于表单来说非常好。只要为您的字段设置maxlength规则，您就可以开始了。例如

$("form[name='myform']").validate({
    rules: {
        myfield: {required:true, maxlength:10}
    }
});

最简单的解决方案是将maxlength指定为11，在每个keyup上测试长度，并将其截断回10个字符，但这个解决方案似乎有点笨拙

它也很容易被剪切/粘贴、拖放、右键单击撤消/重做等操作所击败。除了轮询之外，没有可靠的方法可以获得每个潜在的输入位

为什么不将

maxlength

设置为10，让浏览器正确执行该限制，并在再次尝试按键时显示警告？您不需要阻止任何默认操作，因为浏览器已经在处理长度，因此您必须执行的密钥检查量较低

<input id="x" maxlength="10"/>
<div id="x-warning" style="display: none;">can't type any more!</div>
<script type="text/javascript">
    function LengthMonitor(element, warning) {
        element.onkeypress= function(event) {
            if (event===undefined) event= window.event;
            var code= 'charCode' in event? event.charCode : 'which' in event? event.which : event.keyCode;
            var full= element.value.length===element.maxLength;
            var typed= !(code<32 || event.ctrlKey || event.altKey || event.metaKey);
            warning.style.display= (full & typed)? 'block' : 'none';
        };
        element.onblur= function() {
            warning.style.display= 'none';
        };
    }

    LengthMonitor(document.getElementById('x'), document.getElementById('x-warning'));
</script>

不能再打字了！
功能长度监视器（元件，警告）{
element.onkeypress=函数（事件）{
如果（event==未定义）event=window.event；
var code='charCode'在event？event.charCode:'which'在event？event.which:event.keyCode；
var full=element.value.length==element.maxLength；
var typed=！（代码我正在开发的一个web应用程序中出现了一个类似的情况，当用户将数据输入到输入中时，我需要向用户live提供反馈

老实说，我想出的最好的解决方案就是使用setTimeout定期轮询输入框。我做了一些测试，以在响应性和效率之间找到一个很好的平衡点（我认为大约400毫秒）

它工作得很好，比尝试为每个场景（按下键、更改时等）拼凑事件处理程序要好得多

它不像我想要的那样优雅，但它很管用

如果你真的想这样做，我会实时观察输入，检查它的长度。如果超过了限制，切掉它并提醒用户

当然，这不会取代其他验证

我也会认为这是不必要的。我认为这很好，但是大多数网站都是通过硬限制和提交来验证的。
 < P>当用户越过限制时，如何向用户发出消息，但不能截断他们的输入。您可以防止使用OnSpress事件提交，用户将永远不会有POO。r体验maxlength或瞬态输入。您可以用红色突出显示框或显示图标，以真正将点带回家

但是，这都是客户端的，因此如果确实需要验证输入，则必须将其内置到提交目标的服务器端逻辑中（对于表单）

或者，如果这是实时发生的，则将逻辑链接到由key up事件设置的变量。如果超过长度限制，则显示错误消息，不要截断，也不要更新私有变量。
也不要忘记用户将数据粘贴到控件中。感谢您的提示。我已经考虑过实现onPaste处理程序，但是，考虑到输入的上下文，用户将粘贴到其中的可能性很小（更不用说onPaste支持有多不稳定）。感谢您的提示，但这并不能解决当前的问题。10个字符是硬限制，如果用户试图键入超出硬限制的内容，我需要进行现场测试。在某种程度上可以工作，但charCode在IE和Opera中是不受支持的属性。是的，您可以尝试返回到
哪个
，然后针对这些浏览器返回
键码
。不幸的是，
keypress
是不可靠的（例如，在IE中，你无法区分翻页和
！
）。如果你想可靠地完成这项工作，你必须将
keypdown
设为陷阱，并保留一个包含或不包含真实角色的键码列表。这不是什么有趣的事情。