CODEWITHSUNDEEP
javascriptjquery
Mike
Mike

Reputation: 3418

Script to limit the no. of characters in a textbox not working. Any Ideas?

I have a script which is supposed to limit the no. of characters entered in a text box or textarea. I know I can do this using maxlength attribute. But I want to use JS implementation.

Below is the fiddle:

http://jsfiddle.net/xTrKD/

CODE:

$(function() {
function limitText(limitField, limitNum) 
    { 
        if (limitField.value.length > limitNum)
            { 
                limitField.value = limitField.value.substring(0, limitNum);
                }
        }

})​

HTML:

<input type="text" id="sessionNo" name="sessionNum" onKeyUp="limitText(this,5);" />

Upvotes: 0

Views: 895

Answers (6)

Sani Huttunen
Sani Huttunen

Reputation: 24385

Yet another solution:

<input type="text" id="sessionNo" name="sessionNum" myMaxLength="5" />​​​​​​​​​​​​​​​​​​​​​​​​​​​

$('#sessionNo').on('keypress', function(e) {
    if ($(this).val().length >= $(this).attr('myMaxLength'))
        return false;
});
​

Upvotes: 0

TommyBs
TommyBs

Reputation: 9646

Further on from my comment above

http://jsfiddle.net/xTrKD/1/

$(function () {
    $('input').on('keyup', function (e) {
        limitText(this, 5);
    });

    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
    }
})​;

Upvotes: 1

Cerbrus
Cerbrus

Reputation: 72857

Working fiddle example.

You really don't need a lot of code for this:

function limitText(limitField, limitNum) {
    if([8, 37,38,39,40, 46].indexOf(event.which) == -1) // If the currently pressed key is not the backspace(8), arrow keys(37-40), or delete(46);
    return limitField.value.length < limitNum;          // Check the input field's length.
}

Keep in mind that I added the a return statement in your input's html, and changed the onKeyUp to onKeyDown.

Returning false to a onKeyDown prevents the character from being entered. the advantage of this is that you won't have the entered character flash for a moment, before being removed.

The if is a exception to make sure the backspace(8), arrow keys(37-40), and delete(46) key still work.

That array with numbers are the keys' keycodes. If the currently pressed key (event.which) is not one of those, indexOf() returns -1, so and the function can check the length.

Upvotes: 2

Pez Cuckow
Pez Cuckow

Reputation: 14412

Working fiddle (no jQuery and code in head) http://jsfiddle.net/xTrKD/7/

Input:

<input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" />​

Javascript:

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}​

Upvotes: 0

Keen
Keen

Reputation: 974

You aren't exposing limitText to the global namespace. Try assigning it to window.limitText, so your event-handler can find it. Or, use jQuery to bind it to keyup from within the closure.

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60717

First off, working fiddle: http://jsfiddle.net/Ralt/xTrKD/2/

You had 2 errors:

  • The limitText function was defined in the $(function(){}) function, thus not available outside of it. (like, in the HTML.)
  • The fiddle was wrongly configured. See the options on the left.

By the way, putting javascript in the HTML is a bad idea. You're mixing the content with the behavior. You'd better separate your concerns, using such kind of solution:

$(function() {
    $('input').on('keyup', function() {
        limitText(this, 5);
    });

    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
    }
});

Upvotes: 5

Related Questions