AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Пример ограничения количества введённых символов в textarea

Для элементов input доступно такое свойство, как maxlength, которое позволяет ограничить количество вводимых в эти поля символов. Однако для textarea такой атрибут не существует, и поэтому для ограничения ввода можно использовать JavaScript.

Чтобы указать максимальное количество символов для ввода, добавим к полю атрибут maxlength:

<textarea rows=\"5\" cols=\"45\" maxlength=\"100\"
	onkeypress=\"return isNotMax(this)\">
</textarea>

Теперь создадим функцию, которая будет проверять количество введенных символов и при необходимости блокировать ввод:

function isNotMax(oTextArea) {
	return oTextArea.value.length <= oTextArea.getAttribute('maxlength');
}

Функция возвращает true или false в обработчик событий onkeypress. Поэтому, если длина строки превысит число, указанное в maxlength, то функция вернет false, тем самым предотвратив действие по-умолчанию (ввод символа).

Вышеприведенный код имеет один существенный недостаток - как только количество символов в поле достигнет предела, блокироваться будут все символы, в том числе и Enter и Backspace и т.д. Следовательно исправить введенный текст будет невозможно. Для того, чтобы исправить это, добавим код который будет определять нажатую клавишу:

function isNotMax(e){
	e = e || window.event;
	var target = e.target || e.srcElement;
	var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode)

	switch (code){
		case 13:
		case 8:
		case 9:
		case 46:
		case 37:
		case 38:
		case 39:
		case 40:
		return true;
	}
	return target.value.length <= target.getAttribute('maxlength');
}

Эта функция принимает один аттрибут - событие, затем определяет нажатую клавишу, и если это Enter, Backspace, Delete или стрелки, то возвращается true, если нет, то выполняется обычная проверка. Тэг textarea в этом случае будет выглядеть так:

<textarea rows=\"5\" cols=\"45\" maxlength=\"100\"
	onkeypress=\"return isNotMax(event)\">
</textarea>
Исходный код этого примера:

<script type="text/javascript">
function isNotMax(e){
	e = e || window.event;
	var target = e.target || e.srcElement;
	var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode)

	switch (code){
		case 13:
		case 8:
		case 9:
		case 46:
		case 37:
		case 38:
		case 39:
		case 40:
		return true;
	}
	return target.value.length <= target.getAttribute('maxlength');
}
</script>
<textarea rows="5" cols="45" maxlength="100"
	onkeypress="return isNotMax(event)">
</textarea>

Взято с http://www.jstoolbox.com/

.

© Copyright 2008-2016 by KDG