Улетный счетчик для TEXTAREA на JQuery


Улетный счетчик для TEXTAREA на JQuery

2619
8 из 10
Проголосовало: 8




  • Скачать с сервера
  • Скачать
  • Смотреть демо


Идея пришла во время разработки дизайна виджета Twitter. Возник вопрос: куда вставить счетчик символов, ведь есть ограничение. Возможно, это не идея никакая, и давно все это уже придумано. Я решил, что будет интересно, чтобы цифры вылетали из букв и исчезали во время написания. Нигде раньше такого не видел сам, честно, но есть ощущение, что это не удивит людей. Ну, да ладно. В общем, я принялся за написание такого скрипта. Текстовый счетчик будет полезен для комментариев, будь даже это интернет магазин компьютерных игр. Самая главная задача здесь – это не анимация, и не то, каким образом будет вестись подсчет символов. Все это уже заезженная тема, пройденный этап. Или что там говорят в таких случаях? Самое главное – узнать позицию курсора в TEXTAREA в пикселях. Именно той самой мигающей палочки в TEXTAREA, а не стрелки. Как позже выяснилось при поиске, эта палочка называется – каретка. Поэтому в дальнейшем буду писать «каретка» вместо «мигающей палочки».

Если честно, в интернете полно статей о том, как узнать позицию каретки в TEXTAREA, и таким образом я нашел счетчик для TEXTAREA. И позиция во всех случаях выдается одним лишь числом. Определяется порядковый номер символа, после которого стоит каретка или перед которым она стоит, не важно. Разве это нам нужно? было бы замечательно, подумал я, найти скрипт, который выдает нам позицию каретки с точностью до пикселей сверху и снизу, чтобы в CSS можно было задать такие параметры, как TOP и LEFT. Поиски были долгими. Я уже и не искал на русскоязычных источниках, вводил в поиске такие запросы: «caret position pixels» и «caret textarea pixels». Я уже подумал, что пусть будет тот самый скрипт, который выдает одно число (я просто умножу его на среднюю ширину символа). Но это была плохая идея, потому что в TEXTAREA есть и другие строки, и в INPUT не прокатит. Тот скрипт нужен для вставки в поле смайликов и специальных кодов на место курсора, но никак не для моей цели.

Спустя несколько часов я нашел плагин JQuery, выдающий позицию каретки в пикселях. Только это мне было и нужно. Теперь-то дело за малым. После этого я просто сделал, чтобы при каждом нажатии на клавишу создавался DIV с количеством символов, и плавно исчезал. Когда вы быстро набираете в TEXTAREA какой-нибудь текст, то счетчики вылетают так, что это напоминает дымок. Выше я писал, что это счетчик для Twitter, поэтому я подумал об ограничении. Логично, что счетчик поменяет свой цвет на красный, достигнув барьера. Теперь это не похоже на дымок, теперь это как кровь.

Подключение JQuery и плагина Caretposition

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  <script type="text/javascript" src="careposition.js"></script>


Код HTML

Code
<textarea id="textarea"></textarea>  
  <div id="tip"></div>


Код Javascript

Code
<script type="text/javascript">  
  $(function() {  

  var tip = $('#tip');  
  $('#textarea').bind('keyup', function(e) {  
  var pos = $(this).getCaretPosition();  
  var bleft = this.offsetLeft + pos.left;  
  var btop = this.offsetTop + pos.top;  
  if($('#textarea').val().length > 139) {bnts = 'color:red;'} else {bnts = ''}  
  tip.after('<div class="nums" id="nums'+$('#textarea').val().length+'" style="'+bnts+'left: '+bleft+'; top: '+btop+'">'+$('#textarea').val().length+'</div>');  
  $('#nums'+$('#textarea').val().length).animate({marginLeft: '40px', marginTop: '-40px', opacity: '0'}, 1200 , function() {$(this).hide()})  

  })  
  });  
  </script>


Плагин выдает нам точную позицию каретки слева и справа. Обратите внимание на то, что если символов в TEXTAREA больше 139, то цвет счетчика станет красным. Также для каждого значения создается отдельный DIV, который в последствии и плавно улетучивается.

Код CSS

Code
<style type="text/css">  
  body {margin:0;padding:0;background:#E3E3E3}  
  .container {text-align:center;margin-top:200px}  

  textarea {padding:10px;border:1px solid #A5A5A5;width:300px;height:100px;resize:none;  
  font-family:Georgia;  
  font-size:14px;  
  }  
  *:focus {outline:none}  

  .nums {position:absolute;margin-top:-14px;margin-left:3px;font-size:10px;color:#646464}  

  </style>
Автор публикации: Загрузка
Загрузка
D[i]M, это его n материал
Источник: http://yraaa.ru/publ/3-1-0-1511
  • Всего комментариев: 21

kolyan1282
0
kolyan1282 написал: Написано 29 Ноября 2012 в 12:20
Комментарий №21
очень сложно все тут. или так описание плохо сделано, нужно так чтобы и для начинающих, как я, было понятно

4uPKoff
0
4uPKoff написал: Написано 05 Октября 2012 в 05:33
Комментарий №11
подскажите как его в комментарии новостей вставить.спасбо

Вовчик
0
Вовчик написал: Написано 05 Октября 2012 в 10:50
Комментарий №12
вставляешь код в форму добавления коомментов, после чего в js коде #textarea меняешь на id или класс своей формы добавления комментов...

4uPKoff
0
4uPKoff написал: Написано 05 Октября 2012 в 12:08
Комментарий №13
подскажи пожалуйста
у меня вот такой код

<textarea class="commFl" style="height:135px;" rows="8" name="message" id="message" cols="30" onKeyPress="if (event.keyCode==10 || (event.ctrlKey && event.keyCode==13)) {addcom();}">
$MESSAGE$</textarea>

что мне вставить надо?с меня плюс само собой

Вовчик
0
Вовчик написал: Написано 05 Октября 2012 в 12:10
Комментарий №14
#textarea меняй на #message

4uPKoff
0
4uPKoff написал: Написано 05 Октября 2012 в 12:21
Комментарий №15
не то...напиши пожалуйста код?
сркипты вставил ксс тоже,меня текстареа на месселджж,все равно...напигши именно кусочек последний.

4uPKoff
0
4uPKoff написал: Написано 06 Октября 2012 в 03:49
Комментарий №16
<textarea class="commFl" style="height:135px;" rows="8" name="message" id="message" cols="30" onKeyPress="if (event.keyCode==10 || (event.ctrlKey && event.keyCode==13)) {addcom();}">$MESSAGE$</#message>
вот это не работает!

4uPKoff
0
4uPKoff написал: Написано 06 Октября 2012 в 03:49
Комментарий №17
angry

Вовчик
0
Вовчик написал: Написано 30 Октября 2012 в 19:32
Комментарий №18
??

4uPKoff
0
4uPKoff написал: Написано 31 Октября 2012 в 03:26
Комментарий №19
не работает

Вовчик
0
Вовчик написал: Написано 01 Ноября 2012 в 15:49
Комментарий №20
С тебя 100$ XD))
вставляй весь код в форму добавления комментариев, предварительно удалив все от-туда))
Доступно только для пользователей

@prod
0
@prod написал: Написано 16 Августа 2012 в 10:40
Комментарий №10
Это не реклама , я на яра сижу иногда !

paraz1t
0
paraz1t написал: Написано 14 Августа 2012 в 17:29
Комментарий №9
Ну так по сути можно и для <input type="text" /> переделать

ExTpeMAJI-xD
0
ExTpeMAJI-xD написал: Написано 13 Августа 2012 в 12:30
Комментарий №7
[реклама]

Handyman
0
Handyman написал: Написано 13 Августа 2012 в 10:56
Комментарий №5
Вовчик, а можно ли его в чат влепить, если да, то как?

Вовчик
0
Вовчик написал: Написано 13 Августа 2012 в 11:56
Комментарий №6
да, можно, я себе сразу сделал, как увидел данный скрипт))

Handyman
0
Handyman написал: Написано 14 Августа 2012 в 13:55
Комментарий №8
А не подскажешь как?

DontST0PMe
0
DontST0PMe написал: Написано 13 Августа 2012 в 00:47
Комментарий №4
Не правильно задал вопрос, его нельзя использовать в обычном текстовом поле юкоза?

DontST0PMe
0
DontST0PMe написал: Написано 13 Августа 2012 в 00:43
Комментарий №3
А как его установить то правильно?

Fresh
0
Fresh написал: Написано 12 Августа 2012 в 23:08
Комментарий №1
Неплохо. Но не все поставят скрипт себе на сайт smile

Вовчик
0
Вовчик написал: Написано 12 Августа 2012 в 23:13
Комментарий №2
смотря где применят)

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