Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.12.2011, 19:52
Новичок на форуме
Отправить личное сообщение для Pavel.zol Посмотреть профиль Найти все сообщения от Pavel.zol
 
Регистрация: 09.12.2011
Сообщений: 4

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

Спасибо за внимание. Жду помощи..
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2011, 20:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Pavel.zol
Необходимо что бы кнопка Submit принимала значение disable
И в чём тут проблема?

Сообщение от Pavel.zol
или как-то по-дургому может быть можно ограничить ее функциональность
Можно просто форму не отправлять...

Сообщение от Pavel.zol
очень хотелось бы что бы рамка <textarea> становилась красной
Так задай это стилем ЦСС

textarea {
   border: 1px solid red;
}
Ответить с цитированием
  #3 (permalink)  
Старый 10.12.2011, 02:40
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от Pavel.zol Посмотреть сообщение
Стандартные варианты... не годятся потому как от копипаста не спасают.
так навесьте обработчики на все стандартные операции (события)
"keydown", "keyup", "cut", "paste", "input", "change" и копипаст в Ваших руках
Ответить с цитированием
  #4 (permalink)  
Старый 14.12.2011, 21:55
Аспирант
Отправить личное сообщение для Arigato Посмотреть профиль Найти все сообщения от Arigato
 
Регистрация: 11.12.2011
Сообщений: 42

Вот примерчик набросал:
<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
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от Arigato Посмотреть сообщение
Вот примерчик набросал...
не прикольно. попробуйте не используя клавиатуру вставить в textarea текст с помощью мышки. или удалить часть текста с помощь мышки? проблема - в onchange. пока Вы не "сойдёте" с поля (textarea ) - оно не сработает и, соответственно, не изменит длину текста и не подсветит рамку.
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2011, 22:47
Аспирант
Отправить личное сообщение для Arigato Посмотреть профиль Найти все сообщения от Arigato
 
Регистрация: 11.12.2011
Сообщений: 42

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

Последний раз редактировалось Arigato, 14.12.2011 в 22:53.
Ответить с цитированием
  #7 (permalink)  
Старый 14.12.2011, 23:01
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от Arigato Посмотреть сообщение
А вот всякие события, типа cut, paste, наступают до вырезания или вставки
-не поняллллл? т.е. пользователь ещё не нажал правую кнопку мышки и не нажал Paste, а только подумал об этом, -а событие onpaste уже произошло?!
Сообщение от Arigato Посмотреть сообщение
Вообще, странно, что change не хочет оперативно срабатывать, а только на потерю фокуса.
-это не странно. представьте что, у Вас в мемо-поле висит килобайт 100 текста (к примеру редактируете статью). и при этом на onchange висит обработчик, который сохраняет этот текст в базу данных на сервере. если onchange будет срабатывать при вводе каждой буквочки (или удалении), представляете какой получится трафик и тормоза?
странно другое: почему разработчики браузеров не сделали ещё одно событие, которое было бы типа onchange2, но срабатывало по каждому "чиху" - тогда у программиста была возможность выбора.

Сообщение от Arigato Посмотреть сообщение
Короче, тогда такой вариант решения:
setInterval (..., 10);
-а Вы никогда не смотрели, как себя при этом ведёт IE? в большинстве случаев курсор у него начинает метать икру... ну не любит IE setInterval/setTimeOut с 10-миллисекундными задержками.
Ответить с цитированием
  #8 (permalink)  
Старый 14.12.2011, 23:08
Аспирант
Отправить личное сообщение для Arigato Посмотреть профиль Найти все сообщения от Arigato
 
Регистрация: 11.12.2011
Сообщений: 42

По порядку:
1. Событие срабатывает, когда пользователь выбрал пункт меню "Вставить", но самой вставки еще не произошло.
2. В таком случае можно с тем же успехом использовать событие потери фокуса. А вот для задачи из этого топика как раз и подошел бы нормальный change. Ну да не важно, т.к. его нет и не будет.
3. Перестал в IE курсор мигать. Ну и фиг с ним Зато задача решена. Или вы готовы предложить решение получше? А то пока что только критика.
Ответить с цитированием
  #9 (permalink)  
Старый 14.12.2011, 23:19
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от 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) - это обработчики клавиатуры и мыши.
Ответить с цитированием
  #10 (permalink)  
Старый 14.12.2011, 23:42
Аспирант
Отправить личное сообщение для Arigato Посмотреть профиль Найти все сообщения от Arigato
 
Регистрация: 11.12.2011
Сообщений: 42

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемы с submit с помощью JS edycle Events/DOM/Window 0 17.10.2011 19:55
Вывод данных в поле ввода с помощью JS Aleks-prog Ваши сайты и скрипты 0 23.06.2011 12:09
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 22:59
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM jQuery 0 15.09.2010 02:17
Ограничение символов для ввода kotofeich Элементы интерфейса 9 04.06.2010 17:01