CODEWITHSUNDEEP
javascriptjquerytextboxcontenteditable
madhu131313
madhu131313

Reputation: 7396

Two text boxes one with limited number of characters other text box containing remaining

I want to make two text boxes such that if one writes some text First 50 characters should be in first text box what ever entered next should go to the next text box

in jquery or Javascriptenter image description here

The code looks something like this

var content_id = 'editable_div';
max = 50;

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });

function check_charcount(content_id, max, e)
{   
    if(e.which != 50 && $('#'+content_id).text().length > max)
    {
       //the remaining part focusing the mouse on to the next div let the id of the  next editable div be  next

        e.preventDefault();
    }
}

Upvotes: 2

Views: 347

Answers (1)

Shih-En Chou
Shih-En Chou

Reputation: 4195

I think the user is typing. http://jsfiddle.net/sechou/fwU8D/

$("textarea:eq(0)").keyup(function(){
    if($(this).val().length>=10){ //for test: 10
          var str  =$(this).val();
          var length = str.length;
          $("textarea:eq(0)").val(str.slice(0,10));
          $("textarea:eq(1)").val($("textarea:eq(1)").val()    
                                  +str.slice(10,length));

    }
});
$("textarea:eq(0)").keydown(function(){
   if($(this).val().length>=10){//for test: 10              
          var str  =$(this).val();
          var length = str.length;
          $("textarea:eq(0)").val(str.slice(0,10));
          $("textarea:eq(1)").val($("textarea:eq(1)").val()    
                                  +str.slice(10,length));

    }
});
$("textarea:eq(0)").change(function(){
   if($(this).val().length>=10){//for test: 10
          var str  =$(this).val();
          var length = str.length;
          $("textarea:eq(0)").val(str.slice(0,10));
          $("textarea:eq(1)").val(str.slice(10,length));
          $(this).attr("readonly","readonly");
    }
});

HTML

<textarea id="first"></textarea>
<textarea id="second"></textarea>

Upvotes: 2

Related Questions