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

时间:2015-11-12 05:07:03

标签: javascript jquery

我试图阻止用户在字符数达到限制后将数据输入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');
    });

5 个答案:

答案 0 :(得分:3)

试试这个:

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)键。

答案 1 :(得分:1)

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

<强> 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

答案 2 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

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

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

答案 3 :(得分:0)

您可以按照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插件。

答案 4 :(得分:0)

使用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