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

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

12.08.201228516

Идея пришла во время разработки дизайна виджета 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>



Сохраните в социальную сеть
Комментарии (6)
Супер!
0
Al Mak 13.08.2012 в 13:30Спам
Не пашет, рисует цифры слева внизу textarea, left и top внутри div элементов нет. Добавил буквы "px" в конце стилей в момент вставки left и top, всё равно эффекта 0 выводится где-то вверху страницы. Хелп. Сайт на укоз.
0
Гость 13.08.2012 в 17:02Спам
Black_Sun в демо все работает, руки у кого-то из
0
Al Mak 13.08.2012 в 17:33Спам
Гость, может руки у кого-то и оттуда, я уже решил проблему заменив this.offset на аналогию offset()(проблема в тегах table, хз почему, но из-за них плохо определялось) из jQ, добавил 'px' в создании дивов и сделал ограничение на их количество, чтобы сайт не грузило кучей скрытых дивов.
0
Гость 20.08.2012 в 08:28Спам
Это всё отлично, красиво выглядит, но для тех кто печатает слепым методом мешать будет. Мне мешает, по крайней мере. Слишком заметно. Надо сделать чтобы цифры всплывали либо более прозрачными, либо что еще лучше, полностью проявлялись лишь перед полным исчезновением (наверху). А так - интересная задумка:)
0
Денис Минов Вчера в 13:52Спам
Интересно, но лишнее.. Правда если доработать, снизив нагрузку на сайт, то думаю куда-нибудь впихнуть можно.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт