两个文本框,其中一个字符数量有限,其他文本框包含剩余

时间:2012-08-17 17:02:23

标签: javascript jquery textbox contenteditable

我想制作两个文本框,如果有人写一些文字 前50个字符应位于第一个文本框中  接下来应该进入的是什么 下一个文本框

在jquery或Javascript enter image description here

代码看起来像这样

  

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

1 个答案:

答案 0 :(得分:2)

我认为用户正在打字。 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>