Locking A Textarea Using Jquery?

How do I 'lock' a textarea with jQuery so that no more characters can be entered? I don't want to necessarily disable it since I want to allow characters to be deleted. update: oo

Solution 1:

following is quick contraption from modification of jquery.numeric plugin :)

It allows special keys but don't let user type anything.

<textareaid="txt"rows="5"cols="50"></textarea><scripttype="text/javascript">
$(document).ready(function(){
   $("#txt").keypress(function(e){
         var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
         // allow Ctrl+Aif((e.ctrlKey && key == 97/* firefox */) || (e.ctrlKey && key == 65) 
                                     /* opera */) returntrue;
         // allow Ctrl+X (cut)if((e.ctrlKey && key == 120/* firefox */) || (e.ctrlKey && key == 88) 
                                     /* opera */) returntrue;
         // allow Ctrl+C (copy)if((e.ctrlKey && key == 99/* firefox */) || (e.ctrlKey && key == 67) 
                                     /* opera */) returntrue;
         // allow Ctrl+Z (undo)if((e.ctrlKey && key == 122/* firefox */) || (e.ctrlKey && key == 90) 
                                     /* opera */) returntrue;
         // allow or deny Ctrl+V (paste), Shift+Insif((e.ctrlKey && key == 118/* firefox */) || (e.ctrlKey && key == 86) 
                                     /* opera */
         || (e.shiftKey && key == 45)) returntrue;
         //page up, down, home end, left-right-up-downif(key > 32 && key < 40) returntrue;

         // if DEL or BACKSPACE is pressedreturn key == 46 || key == 8;

   });
});
</script>

Solution 2:

Try this:

$("textarea").keypress(function(){ 
  if($(this).val().length>=10) 
    returnfalse; 
});

Demo here: http://jsbin.com/erama

Solution 3:

You could bind to the keypress/keydown event of the textarea and block out all characters except backspace and delete. This way the user can delete characters but can't add/remove new characters.

You bind to the keypress event like this:

$('#text-area').keypress(function(e) {});

Then you can use the keyCode property of the event object (argument e) that is passed to check if the pressed key is delete or backspace. You can find more information on the keypress event on the jquery website.

You can base yourself on a list of keycodes to only allow delete and backspace. In this case keyCode should be equal to 8 or 46.

So the resulting code would be something like this (not tested though):

$('#text-area').keypress(function(e) { if(e.keyCode != 8 && e.keyCode != 46) { e.preventDefault(); } }); 

The preventDefault function of the event will stop any further processing, so if the characters is not delete or backspace it will not be typed.

Solution 4:

Here is plugin to limit input to textboxes/textareas

    jQuery.fn.charlimit = function(prompt, limit) {
        this.keyup(function(e) {
            var txt = $(this).val();
            var c = txt.length;

            if (prompt != null || prompt != 'undefined') {
                $(prompt).html((limit - c) + " chars left.");
            }
            if (c > limit) {
                $(this).val(txt.substring(0, limit));
                returnfalse;
            }
            returntrue;
        });
        returnthis;
    }

prompt can be any span/div etc to show prompt message.