Question

我创建了一个文本区域的计数器，现在我成功计算了长度，但我希望在达到限制后，用户不能再输入。

如何在达到限制时停止输入？

$('textarea').keyup(function () {
  var max = 10;
  var len = $(this).val().length;
  var char = max - len;
  if (len >= max) {
    $(this).parent().find('.counter').text(char + '/'+max);
    $(this).parent().find('.counter').css({"color":"red"});
  } 
  else {
    $(this).parent().find('.counter').text(char + '/'+max);
    $(this).parent().find('.counter').css({"color":"#ccc"});    
  }
});

继续jsfiddle https://jsfiddle.net/5vf8pce3/

Answer 1

试试这个：

＆＃13;

var maxLength = 10;
$('textarea').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $(this).parent().find('.counter').text(length +"/"+maxLength);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<textarea class="form-control"  maxlength="10" rows="3"></textarea>
<span class="counter"></span>

＆＃13;

Answer 2

你可以：

1）将keyup更改为keydown和return false;。小提琴：https://jsfiddle.net/mrlew/5vf8pce3/4/

2）或使用maxlength attribute（HTML5）。

<textarea maxlength="10"></textarea>

Answer 3

这个jQuery处理程序可以获取一个对象。我的意思是处理keyup事件的函数可以获取包含事件的对象。然后可以使用函数preventDefault（）取消该事件。固定代码：

$('textarea').keyup(function (event) {
  var max = 10;
  var len = $(this).val().length;
  var char = max - len;
  if (len >= max) {
    $(this).parent().find('.counter').text(char + '/'+max);
    $(this).parent().find('.counter').css({"color":"red"});
    event.preventDefault();
  } 
  else {
    $(this).parent().find('.counter').text(char + '/'+max);
    $(this).parent().find('.counter').css({"color":"#ccc"});    
  }
});

Answer 4

尝试这个..

$('textarea').keyup(function () {
var max = 10;
var len = $(this).val().length;
 var char = max - len;
if (len >= max) {

$(this).parent().find('.counter').text(char + '/'+max);
$(this).parent().find('.counter').css({"color":"red"});
$(this).attr('disabled', 'disabled');
} 
else {
   $(this).parent().find('.counter').text(char + '/'+max);
  $(this).parent().find('.counter').css({"color":"#ccc"});    
 }
});

jQuery Counter：达到限制时停止类型

4 个答案: