Question

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

Answer 1

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>