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


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

291
9 из 10
Проголосовало: 4





В данном коротеньком уроке мы покажем как организовать подсчет введенных символов "на лету" с помощью 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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 2
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: