Улетный счетчик для TEXTAREA на JQuery
Идея пришла во время разработки дизайна виджета Twitter. Возник вопрос: куда вставить счетчик символов, ведь есть ограничение. Возможно, это не идея никакая, и давно все это уже придумано. Я решил, что будет интересно, чтобы цифры вылетали из букв и исчезали во время написания. Нигде раньше такого не видел сам, честно, но есть ощущение, что это не удивит людей. Ну, да ладно. В общем, я принялся за написание такого скрипта. Самая главная задача здесь – это не анимация, и не то, каким образом будет вестись подсчет символов. Все это уже заезженная тема, пройденный этап. Или что там говорят в таких случаях? Самое главное – узнать позицию курсора в TEXTAREA в пикселях. Именно той самой мигающей палочки в TEXTAREA, а не стрелки. Как позже выяснилось при поиске, эта палочка называется – каретка. Поэтому в дальнейшем буду писать «каретка» вместо «мигающей палочки».
Если честно, в интернете полно статей о том, как узнать позицию каретки в TEXTAREA, и таким образом я нашел счетчик для TEXTAREA. И позиция во всех случаях выдается одним лишь числом. Определяется порядковый номер символа, после которого стоит каретка или перед которым она стоит, не важно. Разве это нам нужно? было бы замечательно, подумал я, найти скрипт, который выдает нам позицию каретки с точностью до пикселей сверху и снизу, чтобы в CSS можно было задать такие параметры, как TOP и LEFT. Поиски были долгими. Я уже и не искал на русскоязычных источниках, вводил в поиске такие запросы: «caret position pixels» и «caret textarea pixels». Я уже подумал, что пусть будет тот самый скрипт, который выдает одно число (я просто умножу его на среднюю ширину символа). Но это была плохая идея, потому что в TEXTAREA есть и другие строки, и в INPUT не прокатит. Тот скрипт нужен для вставки в поле смайликов и специальных кодов на место курсора, но никак не для моей цели.
Спустя несколько часов я нашел плагин JQuery, выдающий позицию каретки в пикселях. Только это мне было и нужно. Теперь-то дело за малым. После этого я просто сделал, чтобы при каждом нажатии на клавишу создавался DIV с количеством символов, и плавно исчезал. Когда вы быстро набираете в TEXTAREA какой-нибудь текст, то счетчики вылетают так, что это напоминает дымок. Выше я писал, что это счетчик для Twitter, поэтому я подумал об ограничении. Логично, что счетчик поменяет свой цвет на красный, достигнув барьера. Теперь это не похоже на дымок, теперь это как кровь.
Подключение JQuery и плагина Caretposition
<script type="text/javascript" src="careposition.js"></script>
Код HTML
<div id="tip"></div>
Код 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
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>
Воспользуйтесь сервисом uKit. Никакого кода!
