CODEWITHSUNDEEP
javascriptjquery
Manikandan
Manikandan

Reputation: 1816

How to count and limit the text from 2 text fields in a form?

i tried to count and limit the user inputs from two text fields. that means max char is 20, then user can enter only 20 char in both text fields.I tried like this

$(document).ready( function() {

jQuery.fn.getLength = function(){
var count = 0;
var max=$("#max").val();
this.each(function(){
   count += jQuery(this).val().length;
     });   
 var rem=max-count;
return rem;
};

var $inputs= jQuery('#left,#right');
$inputs.bind('keyup',function(){
    var remain=$inputs.getLength();
 jQuery('#count').html($inputs.getLength());
    $("#left").keyup(function(){
        if($("#left").val().length > remain){
        $("#left").val($("#left").val().substr(0, remain));
        }
    });

    $("#right").keyup(function(){
        if($("#right").val().length > remain){
        $("#right").val($("#right").val().substr(0, remain));
        }
    });

});

});

but it only works for single text box, doesn't take values from 2 fields. any help please..

Upvotes: 0

Views: 144

Answers (4)

Steve Papa
Steve Papa

Reputation: 422

All you need is this code, it detects the keypress in either #left or #right, if the count of the two is more than 20, it removes the last character typed

$("#left,#right").keyup(function () {
    var charCount = $('#left').val().length + $('#right').val().length;
    if (charCount > 20) {
        difference = -Math.abs(charCount - 20);
        $(this).val($(this).val().slice(0, difference));
    }
});

Demo http://jsfiddle.net/k8nMY/

My first solution worked on keydown and used return false to stop further entry, however this had the effect of disabling backspace and other keys.

This solution, which executes on keyup waits until after the key is pressed then counts characters. If the number is over 20 it will remove the last character typed. This way, the user can still press backspace and make changes as they wish, but not go over 20 chars.

I have also modified the script further, what it does is detect ANY change, e.g. a paste of a long string. It removes the 'difference' above 20 characters.

This should be a complete solution to the problem.

Upvotes: 2

gvee
gvee

Reputation: 17161

DEMO: http://jsfiddle.net/EEbuJ/2/

JQuery

$('#left, #right').keyup(function(e) {
    if (maxLen() <= 20)
    {
        // Save the value in a custom data attribute
        $(this).data('val', $(this).val());
    } else {
        // over-ride value with saved data
        $(this).val($(this).data('val'));
    }
});

function maxLen() {
    var x = 0;

    $('#left, #right').each(function() {
        x += $(this).val().length;
    });

    return x;
};

This will save the typed in value for your inputs to a custom data attribute, if the total number of characters in the specified inputs is no more than 20.

When the maximum number of characters is reached then we stop saving the typed in value and revert the value back to our previous save (i.e. less than the maxiumum) effectively undo-ing the value.

Upvotes: 2

Vogel612
Vogel612

Reputation: 5647

I doubt you can do $inputs.getLength() as $inputs is an array and thus will return the arraylength: 2
You will have to add up the overall sign length in both inputs:

$('#left,#right').keydown(function(){
    var leftlength = $('#left').val().length;
    var rightlength = $('#right').val().length;
   if(leftlength + rightlength > 20)
   {
    return false;
   }
});

or to make it shorter

if($('#left').val().length+$('#right').val().length >20){return false;}

Upvotes: 0

Gena Moroz
Gena Moroz

Reputation: 954

Well it should be easy one: http://jsfiddle.net/4DETE/1/

var textLength =$inputs.eq(0).val().length+$inputs.eq(1).val().length;
if(textLength>=20)
    return false

just count length of values, if you'll have more elements to limit, use jquery.each to iterate inputs

Upvotes: 0

Related Questions