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

Question

我想在Javascript中实现一个140字符限制的文本框,这样当添加第141个字符时,该字符将被删除.

我不想向用户显示任何超出限制的消息或警报.已经有了反击.

以下是我想要做的一个例子: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);
});