> Tips and Tricks > jQuery:

jQuery:


24 2010, 14:35. : Mysterious Master
 jQuery:

, , maxlength. , jQuery.

, , . , , . .



, -. . , , (, ) . , .



HTML. div (#counter), .

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<scripttype="text/javascript" src="jquery-1.4.1.js"></script>
<scripttype="text/javascript">
$(document).ready(function() {
// here we will write-up the function
});
</script>
</head>
<body>
<formid="input_form"method="POST" action="?">
<textareaid="text"></textarea>
<input type="submit"value="submit">
</form>
<divid="counter"></div>
</body>
</html>

. , . , .

var characters= 100;
$("#counter").append("You have<strong>"+ characters+"</strong> characters remaining");

, keyup ( ), :

$("#text").keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}

, , .

$(this).val() textarea ( ), length . , ( 100), textarea , textarea, substr 0.

substr ; , , , . , 0 ( ), 100 (100 ).

: , textarea , , .

:

varremaining = characters - $(this).val().length;
$("#counter").html("You have <strong>"+ remaining+"</strong> characters remaining");

, textarea, .

. 10, :

if(remaining <= 10)
{
$("#counter").css("color","red");
}
else
{
$("#counter").css("color","black");
}

:

$(document).ready(function(){
var characters = 220;
$("#counter").append("You have <strong>"+characters+"</strong> characters remaining");
$("#text").keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
var remaining = characters -$(this).val().length;
$("#counter").html("You have <strong>"+remaining+"</strong> characters remaining");
if(remaining <= 10)
{
$("#counter").css("color","red");
}
else
{
$("#counter").css("color","black");
}
});
});

jQuery:

, , , .

:

(function($){
$.fn.limit = function(options) {

limit .

vardefaults = {
limit: 200,
id_result: false,
alertClass: false
}

, , id , ( ), CSS, (/ ), , 10 .

. , , . , , . , ? , CSS, addClass removeClass, css-.

, :

var options =$.extend(defaults, options);

, , id_result :

return this.each(function() {
var characters = options.limit;
if(options.id_result != false)
{
$("#"+options.id_result).append("You have <strong>"+characters+"</strong> characters remaining");
}
$(this).keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
if(options.id_result != false)
{
var remaining =characters - $(this).val().length;
$("#"+options.id_result).html("You have <strong>"+remaining+"</strong> characters remaining");
if(restanti <= 10)
{
$("#"+options.id_result).addClass(options.alertClass);
}
else
{
$("#"+options.id_result).removeClass(options.alertClass);
}
}
});
});

:

(function($){
$.fn.limit= function(options) {
var defaults = {
limit: 200,
id_result: false,
alertClass: false
}
var options = $.extend(defaults,options);
return this.each(function() {
var characters = options.limit;
if(options.id_result != false)
{
$("#"+options.id_result).append("You have <strong>"+characters+"</strong> characters remaining");
}
$(this).keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
if(options.id_result != false)
{
var remaining =characters - $(this).val().length;
$("#"+options.id_result).html("You have <strong>"+remaining+"</strong> characters remaining");
if(remaining <= 10)
{
$("#"+options.id_result).addClass(options.alertClass);
}
else
{
$("#"+options.id_result).removeClass(options.alertClass);
}
}
});
});
};
})(jQuery);

, , , ( css):

<scripttype="text/javascript" src="jquery-1.4.1.js"></script>
<scripttype="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
color: red;
}
</style>
<scripttype="text/javascript">
$(document).ready(function() {
$("#testo").limit({
limit: 100,
id_result: "counter",
alertClass: "alert"
});
});
</script>



* 1.0, : 16 2010, : 912
! .