it-swarm.com.ru

Ограничить количество символов в поле ввода

Я хочу использовать jquery для ограничения количества символов в редактируемом div (или вводе формы).

19
Firdous

Что касается поля ввода, вы можете использовать атрибут maxlength. Если вы ищете div, проверьте следующее,

        $(function() {

            $ ('#editable_div').keydown ( function (e) {
                //list of functional/control keys that you want to allow always
                var keys = [8, 9, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

                if( $.inArray(e.keyCode, keys) == -1) {
                    if (checkMaxLength (this.innerHTML, 15)) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }
            });

            function checkMaxLength (text, max) {
                return (text.length >= max);
            }
        });

        <div id="editable_div" contentEditable="true" onclick="this.contentEditable='true';" >TEXT BEGIN:</div>

Правка: вы должны переписать функцию checkMaxLength, чтобы игнорировать вкладки и символ новой строки

5
Selvakumar Arumugam

использовать maxlength в теге input

<input type="text" maxlength="20" /> 
47
dku.rajkumar

Атрибут Maxlength - для браузера, поддерживающего эту функцию.
Javascript - для других.

<input class="test-input" type="text" maxlength="12" />
<script>
$('.test-input').unbind('keyup change input paste').bind('keyup change input paste',function(e){
    var $this = $(this);
    var val = $this.val();
    var valLength = val.length;
    var maxCount = $this.attr('maxlength');
    if(valLength>maxCount){
        $this.val($this.val().substring(0,maxCount));
    }
}); 
</script>

http://jsfiddle.net/tvpRT/

18
Serg Hospodarets

Я думаю, это должно сработать для вас.

HTML

<input type="text" name="myText" id="myText" data-maxlength="10" />

jQuery

$('#myText').keyup(validateMaxLength);

function validateMaxLength()
{
        var text = $(this).val();
        var maxlength = $(this).data('maxlength');

        if(maxlength > 0)  
        {
                $(this).val(text.substr(0, maxlength)); 
        }
}
9
JF Paris

Если вы хотите использовать JQuery, вы можете написать что-нибудь самостоятельно или просто использовать существующий плагин, такой как этот .

Но я согласен с dku.rajkumar ... Что не так с использованием атрибута maxlength?

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

Если вы самый большой фанат JQuery ever и отчаянно хотите установить maxlength для всех полей ввода одновременно, сделайте что-то вроде:

$(document).ready(function() {
   $('input[type="text"]').attr({ maxLength : 15 });
});

Просто имейте в виду, что этот метод (JQuery) не будет работать для людей, у которых (по любой причине) отключен JavaScript. Хотя атрибут maxlength тега input работает для всех во всех браузерах.

6
Jules

Допустим, это форма ввода.
Вы можете сделать это с атрибутом 'maxlength', но если вы скажете 'using jQuery',
вот решение.

$('input#limited').attr('maxlength', '3'); 

или вы можете проверить каждое нажатие клавиши

$('input#limited').keypress(function() {
     /*
     check for 3 or greater than 3 characters.
     If you check for only greater than 3, then it will let
     you write the fourth character because just before writing,
     it is not greater than three.
     */
     if($(this).val().length >= 3) {
        $(this).val($(this).val().slice(0, 3));
        return false;
    }
});
4
Sang

просто используйте атрибут с именем "maxlength". Вы можете прочитать больше об атрибутах ввода на w3 input

0
mkk