Question

我试图阻止用户在字符数达到限制后将数据输入textarea。即使页面刷新后，字符数是否可以跟踪已输入的字符数？

Jquery的

    $('.character-count').text('4000 characters left');
    $('#description').keyup(function(){
        var max = 4000;
        var len = $(this).val().length;
        var ch = max - len;
        $('.character-count').text(ch + ' characters left');
    });

Answer 1

试试这个：

var max = 10;

$('#description')
.keydown(function(event){
    if (event.keyCode != 8 && event.keyCode != 46 && $(this).val().length >= max) {
        event.preventDefault();
    }
})
.keyup(function(){
    var $this = $(this),
        val = $this.val().slice(0, max),
        val_length = val.length,
        left = max - val_length;

    $('.character-count').text(left + ' characters left');

    $this.val(val);
});

在每个keyup后，textarea值在max个符号后被切断。
值值长度达到max后，Keydown事件将被阻止，但您仍然可以按退格键（8）或删除（46)键。

Answer 2

使用本地存储以便以后使用

<强> HTML

<textarea name="userText" id="description" cols="30" rows="10"></textarea>
<div class="character-count"></div>

<强>的jQuery

    $(function(){
    var comment = $('#description');
    var val = localStorage.getItem( comment.attr('id') ),
        max = 4000,
        len = val.length,
        left = ( max - len ) ;
    // if the value exists, set it
    if (val) {
        comment.val(val);
        $('.character-count').text( left + ' Character(s) left');
    }
});

$('#description').on('keyup', function (e) {
    var $this = $(this),
        max = 4000,
        val = $this.val(),
        val_length = val.length,
        remain = ((max - val_length)>=0)?(max - val_length):0;

    $('.character-count').text(remain + ' Character(s) left');
    if( val_length > max ){
        $this.val(val.slice(0,max));
    }
    // let's check if localStorage is supported
    if (window.localStorage) {
        localStorage.setItem($(this).attr('id'), $(this).val());
    }


});

SEE DEMO

Answer 3

内置HTML5属性maxlength，会限制输入符号的数量。没有必要自己重新发明它：

＆＃13;

$("input").on('input', function() {
  var left = this.maxLength - this.value.length;
  $("span").text(left + " characters left");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" maxlength="5"/>
<span>5 characters left</span>

＆＃13;

此外，如果您使用keyup处理程序，则用户可以轻松地在其他位置键入您的文本并粘贴任意数量的字符。使用input。

谈论＆＃34;即使在页面刷新后仍然记录了已输入的字符数＆＃34;，您可以使用cookie，但这是一个值得怀疑的功能。任何用户都可以轻松替换或清空任何cookie或其他本地存储。如果这个限制非常重要，请在服务器端实现。

Answer 4

您可以按照coolguy的建议将用户输入的整个文本保存在cookie中，刷新后您只需检索cookie数据并显示在文本区域以及字符计数跟踪器中。

<script>
        $(function () {
            var descText = $.cookie('description');
            var descTextArea = $('#description');
            var maxLength = descTextArea.data('maxLength');
            if (descText) {
                descTextArea.text(descText);
                $('.character-count').text((maxLength - descText.length) + ' characters left');
            }
            else {
                $('.character-count').text(maxLength + ' characters left');

            }
            descTextArea.keydown(function (event) {
               var max = maxLength;
               var len = $(this).val().length;
               var ch = max - len;
               if (ch < 0 ) {
                  event.preventDefault();
                  return false;
               }
               $('.character-count').text(ch + ' characters left');
               $.cookie('description', $(this).val(), {path: '/'});
            });
        });
    </script>

在使用legotin参考答案后使用keydown。 HTML文件是：

<textarea id="description" data-max-length="4000"></textarea>
<span class="character-count"></span>

我正在使用jquery.cookie插件。

Answer 5

使用e.preventDefault（）停止处理。

e.preventDefault();


$('.character-count').html('20 characters left');
var len = 0;
var max = 20;
$('#description').keydown(function (e) {
    var code = e.keyCode;
    if(len == max && code != 8)
    {
        e.preventDefault();
        return false;
    }
    len = $(this).val().length;
    var ch = max - len;
    $('.character-count').text(ch + ' characters left');
});

试试这个 Fiddle

在输入一定数量的字符后，阻止用户将文本输入textarea字段

5 个答案: