Question

我想在Javascript中实现一个包含140个字符限制的文本框，以便在添加第141个字符时删除该字符。

我不想向用户显示任何超出限制的消息或提醒。已有一个counter.re。

以下是我想要做的示例：http://titletweets.com/category/games/michigan-state-vs-north-carolina/

我正在使用jQuery，如果它已经具有此功能，请告诉我。

Answer 1

如果是单行文本框，则可以使用maxlength属性：

<input type="text" maxlength="140" />

值得注意的是，无论您的解决方案是什么，您仍需要在服务器端重复验证。是否向用户报告他们的条目太长或者您只是截断数据取决于您。

Answer 2

斯堪的纳维亚半岛的一家银行最近提起诉讼，因为客户不小心将一大笔钱转入了错误的账户，因为她在账号中键入了太多的零。这使得结果帐号无效，但她没有注意到，因为网络应用程序默默地删除了她的额外数字。所以她进入了像

这样的东西

1223300045

但应该已经输入

122330045

因此帐户

122330004

收到她的钱。 这是一个主要的可用性缺陷。

对于类似文本区域的情况，请查看StackOverflow自己的注释UI。它会显示文本框中有多少文本，并且您有机会编辑文本，但真正可爱的部分是您可以根据需要键入，然后编辑到最低限度，让您确保可以说你喜欢的。如果您的文本框删除了用户的文本：

如果他们通过查看键盘输入
他们必须先擦除文字才能添加新的，更简洁的措辞
他们会生气

因此，我的建议是让用户输入他们想要的内容，但是当他们超出限制时让他们知道，然后让他们进行编辑。以下示例可以帮助您入门。您应该根据需要更改选择器，以便仅操作所需的textareas / text输入。如果限制是错误的，不要忘记做适当的事情。这个样本设置了一个类; class属性允许您更改textarea（或其他）的颜色。您可能想要显示消息或其他内容。关键是让用户继续打字。

function checkTALength(event) {
  var text = $(this).val();
  if(text.length > 140) {
    $(this).addClass('overlimit');
  } else {
    $(this).removeClass('overlimit');
  }
}
function checkSubmit(event) {
  if($('.overlimit', this).length > 0) { return false; }
}

$(document).ready(function() {   
  $('textarea').change(checkTALength);
  $('textarea').keyup(checkTALength);
  $('form').submit(checkSubmit);
});

Answer 3

假设文本区域的id是theTextArea，这样的东西应该可以工作。

$("#theTextArea").keyup(function(event) {

    var text = $("#theTextArea").val();
    if (text.length > 140)
        $("#theTextArea").val(text.substring(0, 140));

});

Answer 4

密钥对不会阻止可能超出限制的右键单击粘贴操作 - 您可能希望设置值onchange或onblur以及按键。

如果您在按键之前处理来自keydown的事件，则可以避免闪烁的第141个字母。

或者，如果这是文本输入元素。设置maxlength

Answer 5

假设您使用的是没有内置textarea的{{1}}，则可以指定maxlength个事件：

keyup

Answer 6

脱离我的头顶：

    $('#myTextArea').keyup(function() {
        var text = $(this).text();
        if(text.length == 141) {
            $(this).text(text.substring(text.length - 2));
        }
    });

Answer 7

$(document).ready(function() {
        var maxLimit = 140;
        $('#txtIdInput').keyup(function() {
        var length = $('#txtIdInput').val().length;
            if (length > maxLimit) {
                $("#txtIdInput").val($("#txtIdInput").val().substring(0, maxLimit));
            }
        });

    });

Answer 8

主题的变体：

$("#textarea").keyup(function(e) {
    var trim = this.value.substr( 0, 140 );  // "foo".substr(0, 140) == "foo"
    if ( this.value != trim ) {
      this.value = trim;
    }
});

当字符数超过某个限制时，如何从文本框中删除字符？

8 个答案: