我已经包含了我放在一起的文本框/文本区域计数器的代码。(希望它不会在我的帖子中被破坏......)
该脚本运行良好,但是我知道由于我对 jquery 和 javascript 缺乏经验,我的代码非常臃肿。
我希望有人能告诉我如何获取重复代码(//事件一到五)并将其放入自己的函数中,然后在每个事件上调用该函数。
谢谢,
杰夫
$(document).ready(function() {
if ($('span[class=tbc] input[type=text], span[class=tbc] textarea')) {
$('span[class=tbc] input[type=text], span[class=tbc] textarea').each(function() {
var maxL = $(this).attr('MaxLength');
$(this).siblings('span[class=tbc]').prepend('<br /><span id="spanID1">Characters remaining: </span>');
$(this).siblings('span[class=tbc]').append('<strong>' + maxL + '</strong>');
//event one
$(this).keyup(function() {
var cnt = $(this).val().length;
var chars = maxL-cnt;
var mesg = $(this).parent('span').attr('ID');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');
if (cnt > maxL - 1) {
//alert('Cannot enter anymore characters.');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>');
}
}); //end keyup function
//event two
$(this).keydown(function() {
var cnt = $(this).val().length;
var chars = maxL-cnt;
var mesg = $(this).parent('span').attr('ID');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');
if (cnt > maxL - 1) {
//alert('Cannot enter anymore characters.');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>');
}
}); //end keydown function
//event three
$(this).mouseout(function() {
var cnt = $(this).val().length;
var chars = maxL-cnt;
var mesg = $(this).parent('span').attr('ID');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');
if (cnt > maxL - 1) {
//alert('Cannot enter anymore characters.');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>');
}
}); //end mouseout function
//event four
$(this).mousemove(function() {
var cnt = $(this).val().length;
var chars = maxL-cnt;
var mesg = $(this).parent('span').attr('ID');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');
if (cnt > maxL - 1) {
//alert('Cannot enter anymore characters.');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>');
}
}); //end mousemove function
//event five
$(this).blur(function() {
var cnt = $(this).val().length;
var chars = maxL-cnt;
var mesg = $(this).parent('span').attr('ID');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');
if (cnt > maxL - 1) {
//alert('Cannot enter anymore characters.');
$(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>');
}
}); //end blur function
}); //end each loop
} //end if ($('span[class=tbc] input[type=text]
}); //end ready