web-dev-qa-db-ja.com

コンテンツの編集可能な要素の最大長を設定します

私はこのコードを持っています

<div id="IIYBAGWNBC" contenteditable="true"></div>

そしてこれはjqueryで

$("#IIYBAGWNBC").text(function(index, currentText) {
  return currentText.substr(0, 100);
});

ユーザーがcontenteditabledivに100文字を超えて入力しないようにするにはどうすればよいですか。

jqueryhtmlcontenteditable
10
J.doe

keydownで、要素の文字列の長さを数え、ユーザーが100文字を超えてフィードしようとした場合にユーザーを防ぐのは非常に簡単です。

$('div').on('keydown paste', function(event) { //Prevent on paste as well

  //Just for info, you can remove this line
  $('span').text('Total chars:' + $(this).text().length); 

  //You can add delete key event code as well over here for windows users.
  if($(this).text().length === 100 && event.keyCode != 8) { 
    event.preventDefault();
  }
});

デモ

説明：

keydownpasteのcontenteditableまたはdivイベントで、lengthのdivが100に到達したかどうかを確認します。ユーザーがバックスペースキーをクリックしていない場合は、任意のキーをクリックするか、右クリックで貼り付けることで、ユーザーがより多くの文字を入力できないようにします。

10
Mr. Alien

上記の回答を使用してコードを一般化することで、このようなことを行いました。これにより、コンテンツ編集可能なdivの最大長を設定できます。

$("div[contenteditable='true'][maxlength]").on('keydown paste', function (event) {
     var cntMaxLength = parseInt($(this).attr('maxlength'));

     if ($(this).text().length === cntMaxLength && event.keyCode != 8) {
         event.preventDefault();
     }
});

HTMLは次のようになります

<div id="IIYBAGWNBC" contenteditable="true" maxlength="500"></div>

このようにして、コンテンツ編集可能なDiv要素のいずれかにmaxlenghtについて言及できます。これがお役に立てば幸いです。

5
Roshith

単純に、javascriptなしでhtmlで行うことができます。

<div contenteditable="true" onkeypress="return (this.innerText.length <= 26)"> </div>

0
Gurung