Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2016, 00:58
Интересующийся
Отправить личное сообщение для nekada Посмотреть профиль Найти все сообщения от nekada
 
Регистрация: 21.11.2016
Сообщений: 28

Ограничение символов для нескольких textarea
Тук, тук, здрасте.
есть скприт
<script>
function limitText(limitField, limitCount, limitNum) { 
if (limitField.value.length > limitNum) { 
limitField.value = limitField.value.substring(0, limitNum); 
} else { 
 limitCount.value = limitNum - limitField.value.length; 
 } 
 }
</script>


<textarea id="1" onKeyDown="limitText(this,this.form.count,100);" onKeyUp="limitText(this,this.form.count,100);"></textarea>
<input readonly type="text" name="count" size="3" value="100"> осталось символов


Все работает на ура с одним текстовым поле, но ситуация такова, что их можно добавить несколько штук, но id у них разное! И input перестает считать символы, подскажите как это можно поправить. Как привязать input с оставшиеся символами к определенному текстовому полю через его id.
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2016, 08:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от nekada
Все работает на ура с одним текстовым поле, но ситуация такова, что их можно добавить несколько штук, но id у них разное!
<input readonly type="text" name="count" size="3" value="100">
Тут ведь нет ИД.
Сообщение от nekada
Как привязать input с оставшиеся символами к определенному текстовому полю через его id.
Как вариант...
Передавать тот ИД в функцию, а там уже использовать элемент с этим ИД...
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2016, 10:17
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

nekada,
А покажите фрагмент вашего html с несколькими текстареа и инпутами. Они все в одной form?
Ответить с цитированием
  #4 (permalink)  
Старый 16.12.2016, 12:33
Интересующийся
Отправить личное сообщение для nekada Посмотреть профиль Найти все сообщения от nekada
 
Регистрация: 21.11.2016
Сообщений: 28

Сообщение от ksa Посмотреть сообщение
Как вариант...
Передавать тот ИД в функцию, а там уже использовать элемент с этим ИД...
Вы можете показать как это сделать на примере? Собственно в этом и был вопрос)
Ответить с цитированием
  #5 (permalink)  
Старый 16.12.2016, 12:51
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Вообще без id
<textarea oninput="limitText(this,this.nextElementSibling,100);"></textarea>
   <input readonly type="text" name="count" size="3" value="100"> осталось символов
   <textarea onkeydown="limitText(this,this.nextElementSibling,100);"></textarea>
   <input readonly type="text" name="count" size="3" value="100"> осталось символов
   <textarea onkeyup="limitText(this,this.nextElementSibling,100);"></textarea>
   <input readonly type="text" name="count" size="3" value="100"> осталось символов
   <textarea onkeypress="limitText(this,this.nextElementSibling,100);"></textarea>
   <input readonly type="text" name="count" size="3" value="100"> осталось символов

<script>
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) { 
limitField.value = limitField.value.substring(0, limitNum); 
} else { 
 limitCount.value = limitNum - limitField.value.length; 
 } 
 }
</script>

Последний раз редактировалось Dilettante_Pro, 16.12.2016 в 13:57.
Ответить с цитированием
  #6 (permalink)  
Старый 16.12.2016, 22:05
Интересующийся
Отправить личное сообщение для nekada Посмотреть профиль Найти все сообщения от nekada
 
Регистрация: 21.11.2016
Сообщений: 28

Блин! Реально круто работает, я так понял всё дело только в этом?
onkeypress="limitText(this,this.nextElementSibling,100);"

Заметил, что если поставить br между textarea и input, тогда не работает )
Ответить с цитированием
  #7 (permalink)  
Старый 16.12.2016, 22:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126


<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var inp = document.querySelectorAll('[name="count"]');
      [].forEach.call(document.querySelectorAll('textarea'), function(area, i) {
              var count = inp[i], limit = count.value;
              area.addEventListener('input', function() {
                  area.value = area.value.substring(0, limit);
                  count.value = limit - area.value.length;
              });
          });
        });
  </script>
</head>

<body>
  <textarea></textarea>
  <input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
  <textarea></textarea>
  <input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
  <textarea></textarea>
  <input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
  <textarea></textarea>
  <input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 16.12.2016, 22:40
Интересующийся
Отправить личное сообщение для nekada Посмотреть профиль Найти все сообщения от nekada
 
Регистрация: 21.11.2016
Сообщений: 28

рони,
Ваш вариант еще круче, даже в телефоне работает, но я имел ввиду br между textarea и input, а структура такая
<li>
<img>
<textarea></textarea>
<br>
<input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
<span><a href="#">ссылко</a></span>
</li>
и т.д
<li>
<img>
<textarea></textarea>
<br>
<input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
<span><a href="#">ссылко</a></span>
</li>
и т.д 
<li>
<img>
<textarea></textarea>
<br>
<input readonly type="text" name="count" size="3" value="100"> осталось символов<br>
<span><a href="#">ссылко</a></span>
</li>
Ответить с цитированием
  #9 (permalink)  
Старый 16.12.2016, 22:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от nekada
структура такая
это не важно.
Ответить с цитированием
  #10 (permalink)  
Старый 16.12.2016, 22:44
Интересующийся
Отправить личное сообщение для nekada Посмотреть профиль Найти все сообщения от nekada
 
Регистрация: 21.11.2016
Сообщений: 28

рони,
Просто я пишу в одном поле,а символы считает в другом, которое ниже, а в самом последнем поле совсем ничего не считает пиши сколько хочешь ))))
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Минимальное ограничение на количество символов zhemkan Элементы интерфейса 12 16.08.2016 01:02
getElementsByTagName для нескольких тэгов MaxB Events/DOM/Window 11 07.12.2011 23:29
Ограничение символов для ввода kotofeich Элементы интерфейса 9 04.06.2010 17:01
zoom для нескольких фото kodermax jQuery 1 20.02.2009 15:46
Не работает innerHTML для textarea в ФФ ropil Сайт Javascript.ru 5 06.05.2008 19:53