| |
|
|
| | При вводе текста в форму высвечивается количество введенных знаков. Если введено больше заданного минимума, то цвет подсказки количества введенных знаков изменяется.
Этот код хочется немного изменить, но не удается.
А изменить надо вот что.
При вводе вместо "Ведено символов: 55" писать фразу "Недостаточно текста" (без указания количества введенных знаков). А когда введено знаков больше требуемого минимума, то цвет этого сообщения менять на цвет фона, что бы его стало не видно (или не выводить).
Код сложный для меня и дело не идет...
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Проба</title>
<script type="text/javascript" src="../../../jquery.js"></script>
<script type="text/javascript" src="../../../charCount.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//custom usage
$("#message2").charCount({
allowed: 2000,
warning: 100,
counterText: "Введено символов: "
});
});
</script>
<style>
.clear{
clear:both;
}
img{border:none;}
/* Character Count styles */
form{width:600px;}
label{
display:block;
font-size:14px;
}
textarea{
width:600px;
height:60px;
border:2px solid #ccc;
padding:3px;
color:#555;
font:14px Arial, Helvetica, sans-serif;
}
form div{position:relative;margin:1em 0;}
form .counter{
position:absolute;
right:0;
top:0;
font-size:14px;
font-weight:bold;
color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}
</style>
</head>
<body bgcolor="#FFD8B0">
<form id="form" method="post" >
<div>
<label for="message">Минимальная длина текста 100 символов</label>
<textarea id="message2" name="dr_1" rows="3" cols="67"></textarea>
</div>
<p align="center"><input style="font-size:24px" type="submit" value="Далее"></p>
</form>
|
Файл charCount.js
(function($) {
$.fn.charCount = function(options){
// default configuration properties
var defaults = {
allowed: 140,
warning: 25,
css: 'counter',
counterElement: 'span',
cssWarning: 'warning',
cssExceeded: 'exceeded',
counterText: ''
};
var options = $.extend(defaults, options);
function calculate(obj){
var count = $(obj).val().length;
var available = count;
if(available <= options.warning && available >= 0){
$(obj).next().addClass(options.cssWarning);
} else {
$(obj).next().removeClass(options.cssWarning);
}
if(available < 0){
$(obj).next().addClass(options.cssExceeded);
} else {
$(obj).next().removeClass(options.cssExceeded);
}
$(obj).next().html(options.counterText + available);
};
this.each(function() {
$(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
calculate(this);
$(this).keyup(function(){calculate(this)});
$(this).change(function(){calculate(this)});
});
};
})(jQuery);
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.08.2010 в 18:00)
| | | Бредятиной под названием jQuery я не пользуюсь.
Потому дам решение на чистом JS.
На котором Ваша задача решается много короче и качественнее (ибо обрабатывает не только ввод с клавиатуры, но и любую прочую вставку текста, например, методом Copy-Paste):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Проба</title>
<style>
form {width: 600px}
label {display: block; font-size: 14px}
textarea {width: 600px; height: 60px; border: 2px solid #ccc; padding:3px;
color: #555; font: 14px Arial, Helvetica, sans-serif}
form div {position: relative; margin: 1em 0}
#counter {position: absolute; right: 0; top: 0; font-size: 14px;
font-weight: bold; color: #FFD8B0}
</style>
<script>
onload = function ()
{
with (document.form1.dr_1) if (window.addEventListener)
addEventListener ('input', mFUNC, false);
else attachEvent ('onpropertychange', mFUNC);
}
function mFUNC ()
{
document.getElementById ('counter').style.color =
(document.form1.dr_1.value.length < 100) ? '#600' : '#FFD8B0';
}
</script>
</head>
<body bgcolor="#FFD8B0">
<form name="form1" method="post">
<div>
<label>Минимальная длина текста 100 символов</label>
<span id="counter">Недостаточно текста</span>
<textarea name="dr_1"></textarea>
</div>
<p align="center"><input style="font-size: 24px" type="submit" value="Далее"></p>
</form>
</body>
</html>
|
Обратите ещё внимание на то, как "работает" Ваш скрипт, если нажать и удерживать какую-либо клавишу до ввода более сотни символов.
И как в этом случае работает мой. | |
| |
|
|
| |
|
|
| |
для: АЯ
(04.08.2010 в 18:54)
| | | Спасибо, это даже лучше, чем я надеялся увидеть!
Что же касается эффекта удержания клавиши, то на этом я и "погорел" со своим скриптом: посетители легко меня обманывали, сто раз нажимая пробел!
И ещё здорово то, что первоначально, когда не введено ни одного знака, нет сообщения о недостаточности текста (а оно было бы неуместным)!
К тому же, здесь только один файл, а было три.
В общем, великолепно получилось!
Вот только еще бы разместить эту форму по центру страницы... | |
| |
|
|
| |
|
|
| |
для: АЯ
(04.08.2010 в 18:54)
| | | >Бредятиной под названием jQuery я не пользуюсь.
уважаю | |
| |
|
|
| |
|
|
| |
для: psychomc
(04.08.2010 в 22:54)
| | | Что-то мне не удается центрировать форму. Как бы это сделать? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.08.2010 в 23:45)
| | | я бы например положил бы её в div и присвоил бы ему в стилях margin: 0px auto | |
| |
|
|
| |
|
|
| |
для: psychomc
(04.08.2010 в 23:52)
| | | Я с этого и начал. А не сработало. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.08.2010 в 23:55)
| | | потому что скорее всего либо форма либо блок на всю ширину страницы.
фиксированную ширину сделайте | |
| |
|
|
