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

989
9.2 из 10
Проголосовало: 5





В данном коротеньком уроке мы покажем как организовать подсчет введенных символов "на лету" с помощью jQuery. Это достаточно просто организовать с помощью нескольких строчек кода JavaScript. Такая функция, используемая на вашем сайте позволит улучшить интерфейс пользователя.

Пример кода:

Код

<style>  
  #boxezoze{width:0;height:16px;border-radius:5px;background:#5fbbde;}  
  #ezozebox{width:100px;height:16px;margin-right:3px;border-radius:5px;background:#ffffff;border:solid 1px #111111;}  
  #couezoze{float:left;color:#131313;font-size:15px;font-weight:bold;font-family:serif;margin:0 0 0 2px;}  
  </style>  
  <script type="text/javascript">  
  $(document).ready(function(){  
  $("#ezozecou").keyup(function(){  
  var box=$(this).val();  
  var main = box.length *100;  
  var value= (main / 50);  
  var count= 50 - box.length;  
  if(box.length <= 50){  
  $('#couezoze').html(count);  
  $('#boxezoze').animate({  
  "width": value+'%',},1);}  
  else{alert('Лимит исчерпан');}  
  return false;});});  
  </script>  
  <div id="ezozebox"><div id="boxezoze"><div id="couezoze">50</div></div></div><textarea id="ezozecou"></textarea>
Автор публикации: Загрузка
Загрузка
BARABANTEMO, это его n материал
Источник: http://ezoze.ru/stuff/4-1-0-16
  • Всего комментариев: 5

BARABANTEMO
0
BARABANTEMO написал: в материале Написано 10 Января 2016 в 04:00
Комментарий №2
Вовчик да верно - тогда уберём alert и сделаем ограничение в поле ввода
Код
<style>
#boxezoze{width:0;height:16px;border-radius:5px;background:#5fbbde;}
#ezozebox{width:100px;height:16px;margin-right:3px;border-radius:5px;background:#ffffff;border:solid 1px #111111;}
#couezoze{float:left;color:#131313;font-size:15px;font-weight:bold;font-family:serif;margin:0 0 0 2px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#ezozecou").keyup(function(){
var box=$(this).val();
var main = box.length *100;
var value= (main / 50);
var count= 50 - box.length;
if(box.length <= 50){
$('#couezoze').html(count);
$('#boxezoze').animate({
"width": value+'%',},1);}
});});
</script>
<div id="ezozebox"><div id="boxezoze"><div id="couezoze">50</div></div></div><textarea id="ezozecou" maxlength="50"></textarea>

или будем удалять лишние символы
Код
<style>
#boxezoze{width:0;height:16px;border-radius:5px;background:#5fbbde;}
#ezozebox{width:100px;height:16px;margin-right:3px;border-radius:5px;background:#ffffff;border:solid 1px #111111;}
#couezoze{float:left;color:#131313;font-size:15px;font-weight:bold;font-family:serif;margin:0 0 0 2px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#ezozecou").keyup(function(){
var box=$(this).val();
var main = box.length *100;
var value= (main / 50);
var count= 50 - box.length;
if(box.length <= 50){
$('#couezoze').html(count);
$('#boxezoze').animate({
"width": value+'%',},1);}
else{this.value = this.value.substr(0,50); alert('Лимит исчерпан');}
return false;});});
</script>
<div id="ezozebox"><div id="boxezoze"><div id="couezoze">50</div></div></div><textarea id="ezozecou"></textarea>

Вовчик
0
Вовчик написал: в материале Написано 10 Января 2016 в 00:25
Комментарий №1
плохо разработан скрипт, после 50 символов alert окошко появляется, что больше вводить нельзя, а вводить дальше можно...

Betme
0
Betme написал: в материале Написано 11 Января 2016 в 12:51
Комментарий №3
Возможно замутить так??

Marishka
0
Marishka написал: в материале Написано 11 Января 2016 в 13:17
Комментарий №4
В нете был такой скрипт подсчета.

Betme
0
Betme написал: в материале Написано 11 Января 2016 в 14:57
Комментарий №5
подобного не видел! чтобы именно было в написанных комментах!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 433
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • dalamkontak написал:
  • Попробуйте социальную сеть Dalam Kontak !
    Сайт сети: Dkon.app
  • mrnoobsky написал:
  • Это моя работа, которая велась давольно таки давно smile Времени было мало, поэтому я скачал полностью все, что было и сделал архив happy
  • Snoopak написал:
  • 111 мегабайт? wtf? Что в архив напихали?
  • mrnoobsky написал:
  • Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
  • geleson2222 написал:
  • ?
    Последние темы
    Опрос
    337
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей:
    • Обратная связь
    • Правила
    • RSS
    • +18
    • Мобильная версия
    • Хостинг от uCoz
    • Хостинг от uCoz
    • Copyright - webo4ka.ru © 2010-2025 г.
    • Design by Вовчик
      Администратор:)