0

I have to restrict length of a TextArea to 2 characters. I have found tons of answers. Reading those answers I have reached the following code. It has event handlers for 'keydown' and 'keyup'.

  1. Do you think this is correct and enough?
  2. Will it work in all major browsers?

http://jsfiddle.net/Lijo/VAYze/1/

  1. Note: I don’t need a error message to display. Hence regular expression validation will not be good option for me.
  2. Note: I am looking answer based on existing code – not a whole new answer
  3. Note: Key Codes are referred from http://www.asquare.net/javascript/tests/KeyCode.html and http://www.asquare.net/javascript/tests/KeyCode.html

UPDATE

To handle text dragged into text area, I don't see a jQuery solution. I am planning to do a regular expression validator with EnableClientScript="false". It will validate in the server side only.This is to handle anything bypassed the existing jQuery operation. ASP Regular Expression Validator for Multi-line textbox

jQuery

$(document).ready(function () {


var maxLength = 2;

$('.multiline').keydown(function (e) {


    var existingText = $(this).val();
    var existingLength = existingText.length;

    if (existingLength >= maxLength) 
    {
        if (maxLength > 0) 
        {

            if (!checkSpecialKeys(e)) 
            {
                $(this).val(existingText.substring(0, maxLength));
                 $(this).css('color','red');

                //Newly entered character not rendered since false is returned
                e.preventDefault();
            }
        }
    }

  });


//To trim the text if a paste happens
$('.multiline').keyup(function (e) {

    var newText = $(this).val();
    var newLength = newText.length;

    if (newLength > maxLength) {
        if (maxLength > 0) {
            $(this).val(newText.substring(0, maxLength));
            $(this).css('color','red');
        }
    }

});


}
);


function checkSpecialKeys(e) 
{
if (e.keyCode >= 48 && e.keyCode <= 90) 
{
    return false;
}

if (e.keyCode >= 96 && e.keyCode <= 111) 
{
    return false;
}

else 
{
    return true;
}
}
Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418
  • 1
    Values of inputs and textareas can be filled by literally dragging a selected text inside them. Don't forget that possibility. – inhan Dec 07 '12 at 10:02
  • Why don't you use the maxlenght attribute? – Stefan Dec 07 '12 at 10:04
  • It eventually needs to lose focus so you might want to attach a **change** event, which obviously would fire: `$('.multiline').change(function(){console.log('changed!')})` – inhan Dec 07 '12 at 12:33
  • 1
    There are trivial `dragover`, `dragenter` and `drop` event listeners but I wouldn stick with the `change` event since not all of these are supported by all the browsers whereas `change` AFAIK will trigger no matter what. – inhan Dec 07 '12 at 12:35
  • @inhan I have chnaged "keyup" with "change" event. I think, that is the only change the you suggest. – LCJ Dec 07 '12 at 14:09
  • 1
    @Lijo no no my suggesion was an addition, not a change. Keep your key events, just add a separate event listener for the change event. – inhan Dec 07 '12 at 14:14
  • @inhan Thanks..Unfortunately change is not firing in IE8 with IE7 mode. Works fine in Firefox – LCJ Dec 07 '12 at 14:15
  • 1
    So `` does not do anything in IE7? Sorry I'm using a Mac so I can't test it myself. Also, check the `input` and `propertychange` event handlers. I just read about them [here](http://stackoverflow.com/questions/11338592/jquery-textarea-change-event) and [also here](http://api.jquery.com/change/#comment-66879816). – inhan Dec 07 '12 at 14:26

1 Answers1

1

From you requirments, I can only say you should use the maxlength attribute on your textarea. This saves you your JavaScript code, takes care of special scenarios, like dragging text into the the input. Also it is faster since it is a browser function. It's supported by all browsers which support textarea.

Example:

<textarea maxlength="2"></textarea>

maxlength is a new property for for the textarea. It is not supporetd in all browsers... (Source)

Sorry

Stefan
  • 14,826
  • 17
  • 80
  • 143
  • I don't think it works in `IE8`. Did you try it in IE8? http://jsfiddle.net/Lijo/VAYze/2/ – LCJ Dec 07 '12 at 10:14