Question

最近我收到了一个不寻常的请求，即我遇到的最困难的事情是在输入文本框时捕获所有显示字符。设置如下：

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

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

由于我们处理了大量国际数据，因此白名单将具有挑战性。

我已经玩过 keydown ， keypress 和 keyup 的所有组合，阅读 event.keyCode ， event.charCode 和 event.which ，但我找不到适用于所有浏览器的单一组合。我可以管理的最好的是以下在＆gt; = 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;
      };
    }
  });
});

我会批准我正在做的事情可能会过度设计解决方案，但现在我投资了它，我想知道一个解决方案。谢谢你的帮助！

Answer 1

最简单的解决方案是指定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>

Answer 2

由于您已经使用了JQuery，.validate()对于表单来说非常棒。只需为你的领域设置一个maxlength规则，你就可以了。 E.g。

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

Answer 3

在我正在处理的网络应用程序中出现了一个模糊的类似情况，我需要向用户提供实时反馈，因为他们将数据输入到输入中。

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

它运行良好，并且比尝试将事件处理程序整合到每个场景（按键，变换等等）要好得多。

它并不像我想的那么优雅，但它确实有用。

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

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

我还认为这可能是不必要的。我想这很好，但大多数网站都有一个硬限制和提交验证。

Answer 4

当用户超过限制但不截断他们的输入时，如何向用户显示消息？您可以使用onsubmit事件阻止提交，并且用户永远不会遇到maxlength或瞬态输入的糟糕体验。您可以用红色突出显示该框，也可以显示一个图标，以便将点回家。

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

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

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

4 个答案:

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

4 个答案:

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