使用jQuery锁定文本区域？

Question

我该如何使用jQuery“锁定”textarea以防止输入更多字符？ 我不想完全禁用它，因为我希望允许删除字符。

更新：哎呀...我突然想到了：如果我限制长度为400个字符，那么当长度> 400时，我可以使用以下内容：

this.value = this.value.substring(0, 400);

这将只是修剪多余的部分。

- oym

---

以下是关于下面所有解决方案的一个要点：它们都不能防止鼠标复制粘贴到文本区域。 - Joe Chung

此外，请确保在服务器端验证字符计数。客户端验证不安全。 - sjstrutt

Answer 1

以下是修改jquery.numeric插件的快速小工具 :) 它允许使用特殊键，但不允许用户输入任何内容。

<textarea id="txt" rows="5" cols="50"></textarea>

<script type="text/javascript">
$(document).ready(function(){
   $("#txt").keypress(function(e){
         var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
         // allow Ctrl+A
         if((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) 
                                     /* opera */) return true;
         // allow Ctrl+X (cut)
         if((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) 
                                     /* opera */) return true;
         // allow Ctrl+C (copy)
         if((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) 
                                     /* opera */) return true;
         // allow Ctrl+Z (undo)
         if((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) 
                                     /* opera */) return true;
         // allow or deny Ctrl+V (paste), Shift+Ins
         if((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) 
                                     /* opera */
         || (e.shiftKey && key == 45)) return true;
         //page up, down, home end, left-right-up-down
         if(key > 32 && key < 40) return true;

         // if DEL or BACKSPACE is pressed
         return key == 46 || key == 8;

   });
});
</script>

- TheVillageIdiot

---

使用描述性常量代替键代码，是否更好地消除这些注释呢？if (e.ctrlKey && key == keys[CTRL_A]) ... - kangax

Answer 2

试试这个：

$("textarea").keypress(function(){ 
  if($(this).val().length>=10) 
    return false; 
});

演示在这里： http://jsbin.com/erama

- Ariel Popovsky

Answer 3

你可以绑定textarea的keypress/keydown事件，并阻止除退格和删除键以外的所有字符。这样用户就可以删除字符，但无法添加/删除新字符。

你可以像下面这样绑定keypress事件：

$('#text-area').keypress(function(e) {});

然后，您可以使用传递的事件对象（参数e）的keyCode属性来检查按下的键是否为删除或退格。您可以在jquery网站上找到有关keypress事件的更多信息。

您可以基于键码列表来仅允许删除和退格。在这种情况下，keyCode应该等于8或46。

因此，生成的代码应该类似于以下内容（尚未测试）：

$('#text-area').keypress(function(e) { if(e.keyCode != 8 && e.keyCode != 46) { e.preventDefault(); } }); 

事件的preventDefault函数将停止任何进一步的处理，因此如果字符不是删除或退格键，则不会被输入。

- Peter Eysermans

---

你还需要注意其他事件。用户也可以拖放文本和粘贴文本。 - rahul

这比我之前的方法更加复杂，我只是在达到最大值后简单地裁剪掉多余的部分...也许这对我所需的东西来说过于复杂了？ - oym

正如Phoenix所指出的那样，这还不是完美的，如果您可以通过您的解决方案实现所需的功能，而且代码更少，我肯定会选择那个解决方案。@phoenix 我希望粘贴也是一个按键事件（当使用ctrl+v时），不过我需要测试一下？虽然不同的鼠标操作也应该被捕捉到。 - Peter Eysermans

Answer 4

这是一个限制文本框/文本区域输入的插件

    jQuery.fn.charlimit = function(prompt, limit) {
        this.keyup(function(e) {
            var txt = $(this).val();
            var c = txt.length;

            if (prompt != null || prompt != 'undefined') {
                $(prompt).html((limit - c) + " chars left.");
            }
            if (c > limit) {
                $(this).val(txt.substring(0, limit));
                return false;
            }
            return true;
        });
        return this;
    }

提示可以是任何span/div等元素来显示提示信息。

- TheVillageIdiot

---

那个 prompt != null || prompt != 'undefined' 并不能真正防止不存在的元素。你是不是想说 - if (typeof prompt != 'undefined')？ - kangax