Ограничение ввода с помощью блока submit
Запрос по тому что мне нужно получается довольно длинный потому и поиск наверное не дал желаемых результатов. Если ответ на мой вопрос уже имеется, покорно прошу дать на него ссылочку...
Дело вот в чем: есть значит поле <textarea> в котором мне нужно ограничить количество вводимых символов. Стандартные варианты по типу:
<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <= MaxLen);
}
-->
</script>
Implementation:
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ><textarea>
не годятся потому как от копипаста не спасают. Необходимо что бы кнопка Submit принимала значение disable или как-то по-дургому может быть можно ограничить ее функциональность, а также меняла стили в том случае если в форме окажется больше 215 символов. (если будет больше - поедет верстка блоков куда выводятся потом сообщения) Также очень хотелось бы что бы рамка <textarea> становилась красной. Такой функционал реализован на сайте http://mamba.ru/ там где добавляются комплименты. Спасибо за внимание. Жду помощи.. |
Цитата:
Цитата:
Цитата:
textarea {
border: 1px solid red;
}
|
Цитата:
"keydown", "keyup", "cut", "paste", "input", "change" и копипаст в Ваших руках |
Вот примерчик набросал:
<html>
<head>
<style type="text/css">
.border-black {border: 1px solid black}
.border-red {border: 1px solid red}
</style>
<script type="text/javascript"><!--
var maxLen = 0;
function checkLength (object, len)
{
object.className = ( object.value.length > len ) ? "border-red" : "border-black";
}
function setMaxLength (object, len)
{
maxLen = len;
with ( object )
{
maxLength = maxLen;
onkeyup = function (event) {checkLength (this, maxLen)};
onkeydown = function (event) {checkLength (this, maxLen)};
onchange = function () {checkLength (this, maxLen)};
className = "border-black";
}
}
function validate (form)
{
if ( form.text.value.length > maxLen )
{
alert ("Длинна текста больше допустимой");
form.text.focus();
return false;
}
return true;
}
//--></script>
</head>
<body onload="setMaxLength (document.getElementById ('text'), 10)">
<form onsubmit="return validate (this)">
<textarea cols="60" rows="12" id="text" name="text"></textarea><br>
<input type="submit" value=" Отправить ">
</form>
</body>
</html>
|
Цитата:
|
Но отправка все равно будет заблокирована.
А вот всякие события, типа cut, paste, наступают до вырезания или вставки, т.е. их использовать не получится. Вообще, странно, что change не хочет оперативно срабатывать, а только на потерю фокуса. Короче, тогда такой вариант решения:
<html>
<head>
<style type="text/css">
.border-black {border: 1px solid black}
.border-red {border: 1px solid red}
</style>
<script type="text/javascript"><!--
function checkLength (id, maxLen)
{
var object = document.getElementById (id);
object.className = ( object.value.length > maxLen ) ? "border-red" : "border-black";
}
function setMaxLength (id, maxLen)
{
var object = document.getElementById (id);
with ( object )
{
maxLength = maxLen;
className = "border-black";
}
eval ("setInterval (function() {checkLength ('" + id + "', " + maxLen + ")}, 10)");
}
function validate (form)
{
if ( form.text.value.length > maxLen )
{
alert ("Длинна текста больше допустимой");
form.text.focus();
return false;
}
return true;
}
//--></script>
</head>
<body onload="setMaxLength ('text', 10)">
<form onsubmit="return validate (this)">
<textarea cols="60" rows="12" id="text" name="text"></textarea><br>
<input type="submit" value=" Отправить ">
</form>
</body>
</html>
|
Цитата:
Цитата:
странно другое: почему разработчики браузеров не сделали ещё одно событие, которое было бы типа onchange2, но срабатывало по каждому "чиху" - тогда у программиста была возможность выбора. Цитата:
|
По порядку:
1. Событие срабатывает, когда пользователь выбрал пункт меню "Вставить", но самой вставки еще не произошло. 2. В таком случае можно с тем же успехом использовать событие потери фокуса. А вот для задачи из этого топика как раз и подошел бы нормальный change. Ну да не важно, т.к. его нет и не будет. 3. Перестал в IE курсор мигать. Ну и фиг с ним :) Зато задача решена. Или вы готовы предложить решение получше? А то пока что только критика. |
Цитата:
Цитата:
addHandler(o, 'keydown', SetHandChangedK); addHandler(o, 'keyup', SetHandChangedK); addHandler(o, 'cut', SetHandChangedM); addHandler(o, 'paste', SetHandChangedM); addHandler(o, 'input', SetHandChangedM); где addHandler - кроссбраузерный навешиватель обработчиков, а другие функции (K/M) - это обработчики клавиатуры и мыши. |
События cut и paste, как я и писал, можно не задавать, они тут совершенно бесполезны.
А вот input как раз и срабатывает на изменение текста в любом случае, т.е. то, что нужно. Но вот он в IE не работает. Так что ваш вариант не работает в IE. |
| Часовой пояс GMT +3, время: 15:44. |