Форум

Pavel.zol · #1 (**permalink**) 09.12.2011, 19:52

Запрос по тому что мне нужно получается довольно длинный потому и поиск наверное не дал желаемых результатов. Если ответ на мой вопрос уже имеется, покорно прошу дать на него ссылочку...

Дело вот в чем: есть значит поле <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/ там где добавляются комплименты.

Спасибо за внимание. Жду помощи..

ksa · #2 (**permalink**) 09.12.2011, 20:11

Сообщение от Pavel.zol

Необходимо что бы кнопка Submit принимала значение disable

И в чём тут проблема?

Сообщение от Pavel.zol

или как-то по-дургому может быть можно ограничить ее функциональность

Можно просто форму не отправлять...

Сообщение от Pavel.zol

очень хотелось бы что бы рамка <textarea> становилась красной

Так задай это стилем ЦСС

textarea {
   border: 1px solid red;
}

Маэстро · #3 (**permalink**) 10.12.2011, 02:40

Сообщение от Pavel.zol

Стандартные варианты... не годятся потому как от копипаста не спасают.

так навесьте обработчики на все стандартные операции (события)
"keydown", "keyup", "cut", "paste", "input", "change" и копипаст в Ваших руках

Arigato · #4 (**permalink**) 14.12.2011, 21:55

Вот примерчик набросал:

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

Маэстро · #5 (**permalink**) 14.12.2011, 22:09

Сообщение от Arigato

Вот примерчик набросал...

не прикольно. попробуйте не используя клавиатуру вставить в textarea текст с помощью мышки. или удалить часть текста с помощь мышки? проблема - в onchange. пока Вы не "сойдёте" с поля (textarea ) - оно не сработает и, соответственно, не изменит длину текста и не подсветит рамку.

Arigato · #6 (**permalink**) 14.12.2011, 22:47

Но отправка все равно будет заблокирована.
А вот всякие события, типа 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>

Маэстро · #7 (**permalink**) 14.12.2011, 23:01

Сообщение от Arigato

А вот всякие события, типа cut, paste, наступают до вырезания или вставки

-не поняллллл? т.е. пользователь ещё не нажал правую кнопку мышки и не нажал Paste, а только подумал об этом, -а событие onpaste уже произошло?!

Сообщение от Arigato

Вообще, странно, что change не хочет оперативно срабатывать, а только на потерю фокуса.

-это не странно. представьте что, у Вас в мемо-поле висит килобайт 100 текста (к примеру редактируете статью). и при этом на onchange висит обработчик, который сохраняет этот текст в базу данных на сервере. если onchange будет срабатывать при вводе каждой буквочки (или удалении), представляете какой получится трафик и тормоза?
странно другое: почему разработчики браузеров не сделали ещё одно событие, которое было бы типа onchange2, но срабатывало по каждому "чиху" - тогда у программиста была возможность выбора.

Сообщение от Arigato

Короче, тогда такой вариант решения:
setInterval (..., 10);

-а Вы никогда не смотрели, как себя при этом ведёт IE? в большинстве случаев курсор у него начинает метать икру... ну не любит IE setInterval/setTimeOut с 10-миллисекундными задержками.

Arigato · #8 (**permalink**) 14.12.2011, 23:08

По порядку:
1. Событие срабатывает, когда пользователь выбрал пункт меню "Вставить", но самой вставки еще не произошло.
2. В таком случае можно с тем же успехом использовать событие потери фокуса. А вот для задачи из этого топика как раз и подошел бы нормальный change. Ну да не важно, т.к. его нет и не будет.
3. Перестал в IE курсор мигать. Ну и фиг с ним

Зато задача решена. Или вы готовы предложить решение получше? А то пока что только критика.

Маэстро · #9 (**permalink**) 14.12.2011, 23:19

Сообщение от Arigato

Перестал в IE курсор мигать. Ну и фиг с ним

Нельзя так не уважать пользователей. В одних случаях курсор пропадает, в других начинает трястись как сумасшедший. И не всем такое "нравится".

Сообщение от Arigato

Или вы готовы предложить решение получше? А то пока что только критика.

Так я же предложил выше?! И у меня в большом скрипте это так и работает. Вот вырежу кусочек:

addHandler(o, 'keydown', SetHandChangedK);
addHandler(o, 'keyup',   SetHandChangedK);

addHandler(o, 'cut',     SetHandChangedM);
addHandler(o, 'paste',   SetHandChangedM);
addHandler(o, 'input',   SetHandChangedM);

где addHandler - кроссбраузерный навешиватель обработчиков, а другие функции (K/M) - это обработчики клавиатуры и мыши.

Arigato · #10 (**permalink**) 14.12.2011, 23:42

События cut и paste, как я и писал, можно не задавать, они тут совершенно бесполезны.
А вот input как раз и срабатывает на изменение текста в любом случае, т.е. то, что нужно. Но вот он в IE не работает. Так что ваш вариант не работает в IE.

Форум

Справочник

Discord чат

Курсы javascript