javascript - ユーザーが編集可能な div または Iframe で特定の文字を超えて入力することを制限する方法

Question

編集可能な div と iFrame があります。ユーザーが 1 行に 100 文字を超えて入力できないようにする必要があります。ユーザーは、最大 100 文字の行を無制限に入力できます。

また、ユーザーは矢印キーを使用して任意の行に戻り、その行が 100 文字未満の場合はさらにテキストを入力できます。

これを実行する方法は？

編集:これは、ユーザーが入力するのと同じようにリアルタイムである必要があります。

Answer 1

keyupjqueryイベントで確認できます。

$('DIV ID').keyup(function(){
  data = $.trim($('DIV ID')).html().length; 

  if(data > 100) // or add condition as per your requirement
  {
  }
  else
 {
   alert('Your message')
 }
});

Answer 2

$(document).ready(function(){
var max_length = 100;
$("#div-editable").keypress(function(){
    var return_state = true;
    $(this).find("div").each(function(){
        if($(this).text().length >= max_length)
        {
            return_state = false;
            //break;
        }
    });
    return return_state;
});

});

必要に応じて max_length を変更してください。

また、テキストの開始と終了に間隔を空けたい場合は、Trim を使用できます。

これはjsFiddleで確認できます