Q:

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 Javascript
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();
    }
}

A:

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>

