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

最近我收到了一个不寻常的请求，那就是我遇到了最困难的时间，涉及在输入文本框时捕获所有显示字符。设置如下：在JavaScript中捕获*所有*显示字符？

我有一个文本框，有maxlength 10个字符。当用户尝试键入超过10个字符时，我需要通知用户他们正在输入超出字符数限制。

最简单的解决办法是指定最大长度的11，测试每个KEYUP长度，并截断回落到10个字符，但这种解决方案似乎有点缺憾。我想要做的是在keyup之前捕获字符，并根据它是否为显示字符向用户显示通知并阻止默认操作。

因为我们处理了大量的国际数据，所以白名单很具挑战性。

我打得周围的的keydown每一个组合，按键，并KEYUP，阅读event.keyCode，event.charCode，并event.which，但我可以”找到适用于所有浏览器的单一组合。我可以管理的最好的是以下在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; 
     }; 
    } 
    }); 
});

我会恩准我在做什么很可能超过了实际工程的解决方案，但现在我投资，我想知道一个解决方案。谢谢你的帮助！

来源

2010-04-21 Jean-Charles

也不要忘记用户PASTING数据到你的控制。 – vladr 2010-04-21 16:26:14

感谢您的提示。我已经想过实现一个onPaste处理程序，但是，鉴于输入的上下文，用户将粘贴到它的机会很渺茫（更不用说onPaste支持是多么的多余）。 – 2010-04-21 16:55:48

最简单的解决办法是将指定的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>

来源

2010-04-21 17:25:07 bobince

工作到一定程度，但charCode是IE和Opera中不受支持的属性。 – 2010-04-21 17:35:06

是的，你可以尝试回落到那些浏览器的'which'和'keyCode'。不幸的是，''keypress'是不可靠的（例如在IE中，你不能分辨页面和'！'之间的区别）。如果你想要可靠地做到这一点，你必须捕获'keydown'而不是保留一个确实或不意味着真实角色的键码列表。没有多少乐趣。 – bobince 2010-04-21 18:52:20

由于您已经使用JQuery，所以.validate()对于表单来说是非常棒的。只要为你的领域设定最大长度规则，你就可以走了。例如。

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

来源

2010-04-21 16:25:15 dnagirl

感谢您的提示，但这并没有解决手头的问题。 10个字符是硬性限制，如果用户尝试输入超出限制，我需要进行测试。 – 2010-04-21 16:46:19

我有一个隐约类似的情况在一个web应用程序，我在哪里，我需要反馈给用户的工作上来，住，因为他们输入的数据为输入。

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

它工作的很好，比尝试将各种情况下的事件处理程序（按键，按键等等）拼凑在一起要好得多。

它没有我想要的那样优雅，但它的工作原理。

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

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

我也认为这可能是不必要的。我认为这很好，但大多数网站都是通过硬限制和验证提交。

来源

2010-04-22 01:45:29 MisterMister

如何在用户超过限制时向用户显示消息，但不截断他们的输入？您可以使用onsubmit事件阻止提交，并且用户永远不会遇到最大长度或瞬态输入的糟糕体验。您可以用红色突出显示框或显示图标，以真正将这一点带回家。但是，这是所有客户端，所以如果您确实需要验证输入，那么必须将其内置到提交目标的服务器端逻辑（在表单的情况下）。

或者，如果这是实时发生的，请将逻辑链接到由按键事件设置的变量。如果超过长度限制，则显示一条错误消息，不要截断，也不要更新私有变量。

来源

2010-04-27 01:15:07

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

回答

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

回答

相关问题

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