3

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

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

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

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

我玩过keydown、keypress和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;
      };
    }
  });
});

我承认我正在做的事情可能是过度设计解决方案，但现在我已经投资了它，我想知道一个解决方案。

4

4 回答 4

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>
于 2010-04-21T17:25:07.817 回答
0

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

然而，这都是客户端的，所以如果你真的需要验证输入，那必须内置到提交目标的服务器端逻辑中（在表单的情况下）。

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

于 2010-04-27T01:15:07.823 回答
0

由于您已经在使用 JQuery，.validate()因此非常适合表单。只需为您的字段设置 maxlength 规则，您就可以开始了。例如

$("form[name='myform']").validate({
    rules: {
        myfield: {required:true, maxlength:10}
    }
});
于 2010-04-21T16:25:15.313 回答
0

在我正在开发的一个网络应用程序中，我遇到了类似的情况，我需要在用户将数据输入输入时实时向用户提供反馈。

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

它工作得很好，并且比尝试为每个场景（key-down、on-change 等）将事件处理程序组合在一起要好得多。

它不像我想要的那样优雅，但它确实有效。

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

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

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

于 2010-04-22T01:45:29.017 回答