48

Webアプリケーションでcontenteditablediv要素を使用していて、その領域で許可される文字数を制限するソリューションを考え出そうとしています。制限に達すると、文字を入力しようとしても何も起こりません。これは私がこれまでに持っているものです：

var content_id = 'editable_div';

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(){ check_charcount(content_id, max); });
$('#'+content_id).keydown(function(){ check_charcount(content_id, max); });

function check_charcount(content_id, max)
{   
    if($('#'+content_id).text().length > max)
    {
        $('#'+content_id).text($('#'+content_id).text().substring(0, max));
    }
}

これにより、文字数が「max」で指定された数に制限されますが、領域のテキストがjquery .text（）関数によって設定されると、カーソルは領域の先頭にリセットされます。したがって、ユーザーが入力を続けると、新しく入力された文字がテキストの先頭に挿入され、テキストの最後の文字が削除されます。だから本当に、私はコンテンツ編集可能領域のテキストの終わりにカーソルを保つための何らかの方法が必要です。

4

13 に答える 13

54

オブジェクトを関数に渡し、最大値に達した場合にevent呼び出すのはどうですか？e.preventDefault()

var content_id = 'editable_div';  

max = 10;

//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 != 8 && $('#'+content_id).text().length > max)
    {
       // $('#'+content_id).text($('#'+content_id).text().substring(0, max));
       e.preventDefault();
    }
}

ただし、ユーザーが「削除」などを実行できるようにするには、もう少し行う必要がある場合があります。

編集：

'delete'キーのサポートが追加されました。

編集2：

keyupまた、おそらくハンドラーを取り除くことができます。keydown十分なはずです。

于 2010-05-19T16:37:01.947 に答える
27

これを達成する簡単な方法：

<div onkeypress="return (this.innerText.length <= 256)" contenteditable="true">
于 2013-09-10T17:50:51.650 に答える
20

まず、この種のことはユーザーを苛立たせます。代わりに、StackOverflowのコメントフィールドに似た操作を行うことをお勧めします。これにより、好きなだけ入力できるようになり、入力した文字数を示すメッセージが表示されます。そして、それが多すぎるか少なすぎるか、そして長さが有効でないコメントをあなたに提出させることを拒否します。

次に、テキストの長さを本当に制限する<div>必要がある場合、コンテンツが長すぎる場合はすべてのキーストロークでコンテンツ全体を置き換えると不必要にコストがかかり、低速のマシンではエディターが応答しなくなります。イベントを処理し、keypressイベントで使用して文字が挿入されないようにすることをお勧めpreventDefault()します（または、IEでは、を使用している場合は、イベントをに設定returnValueしtrueますattachEvent）。これにより、ユーザーがテキストを貼り付けることができなくなることはないため、pasteイベント（OperaまたはFirefox <3には存在しないため、これらには何らかのポーリングベースのソリューションが必要です）。貼り付けたコンテンツには事前にアクセスできないため、貼り付けによって文字数制限を超えてしまうかどうかわからないため、タイマーを設定して長さを確認する必要があります。貼り付け後。そういうわけで、最初のオプションは私にとって好ましいようです。

于 2010-05-19T16:47:31.703 に答える
5

これは、この最も一般化されたフォームを実行するための最良の方法であり、私にとってはうまく機能します。 

<div contenteditable="true" name="choice1" class="textfield" max="255"></div>

    $('.textfield').on("keypress paste", function (e) {
        if (this.innerHTML.length >= this.getAttribute("max")) {
            e.preventDefault();
            return false;
        }
    });
于 2015-07-27T07:11:17.937 に答える
5

これは、jQueryバインディングで行った方法であり、コンテンツの編集可能な要素にプロパティdata-input-lengthを追加するだけで簡単にできます。ドキュメントの任意の場所にJavaScriptコードを追加するだけです。

$(document).ready(function(){
	// Excempt keys(arrows, del, backspace, home, end);
	var excempt = [37,38,39,40,46,8,36,35];
	// Loop through every editiable thing
	$("[contenteditable='true']").each(function(index,elem) {
	    var $elem = $(elem);
	    // Check for a property called data-input-length="value" (<div contenteditiable="true" data-input-length="100">)
	    var length = $elem.data('input-length');
	    // Validation of value
	    if(!isNaN(length)) {
	    	// Register keydown handler
	        $elem.on('keydown',function(evt){
	        	// If the key isn't excempt AND the text is longer than length stop the action.
	            if(excempt.indexOf(evt.which) === -1 && $elem.text().length > length) {
	               evt.preventDefault();
	               return false;
	            }
	        });
	    }
	});
});
div {
  background-color:#eee;
  border: 1px solid black;
  margin:5px;
  width:300px;
  height:100px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" data-input-length="100">
You can type a 100 characters here
</div>
<div contenteditable="true" data-input-length="150">
You can type a 150 characters here
</div>
<div contenteditable="true" data-input-length="10">
You can type a 10 characters here
</div>

于 2015-11-16T08:22:55.897 に答える
4

次のソリューションでは、コントロールキー（印刷できない文字に対応）も考慮されます。

//Maximum number of characters
var max = 200;

$('#editable_div').keydown(function(e) {
    var keycode = e.keyCode;

    //List of keycodes of printable characters from:
    //http://stackoverflow.com/questions/12467240/determine-if-javascript-e-keycode-is-a-printable-non-control-character
    var printable = 
        (keycode > 47 && keycode < 58)   || // number keys
        keycode == 32 || keycode == 13   || // spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || // letter keys
        (keycode > 95 && keycode < 112)  || // numpad keys
        (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
        (keycode > 218 && keycode < 223);   // [\]' (in order)

    if (printable) {
        //Based on the Bala Velayutham's answer
        return $(this).text().length <= max; 
    }
});
于 2014-08-19T10:57:53.243 に答える
4

@user113716の回答の別のバージョン。「貼り付け」イベント、およびCTRL+Aなどの一部のテキストホットキーをサポートします。

$('#'+content_id).on('keydown paste', function (e) { maxLimitForContenteditableDiv(e, 140) });

function maxLimitForContenteditableDiv(e, limit) {
    var allowedKeys = false;

    if (e.type === 'keydown') {
        allowedKeys = (
            e.which === 8 ||  /* BACKSPACE */
            e.which === 35 || /* END */
            e.which === 36 || /* HOME */
            e.which === 37 || /* LEFT */
            e.which === 38 || /* UP */
            e.which === 39 || /* RIGHT*/
            e.which === 40 || /* DOWN */
            e.which === 46 || /* DEL*/
            e.ctrlKey === true && e.which === 65 || /* CTRL + A */
            e.ctrlKey === true && e.which === 88 || /* CTRL + X */
            e.ctrlKey === true && e.which === 67 || /* CTRL + C */
            e.ctrlKey === true && e.which === 86 || /* CTRL + V */
            e.ctrlKey === true && e.which === 90    /* CTRL + Z */
        )
    }

    if (e.type === 'paste') {
        setTimeout(function () {
            $(e.target).text($(e.target).text().slice(0, limit));
        });
    }

    if (!allowedKeys && $(e.target).text().length >= limit) {
        e.preventDefault();
    }

于 2019-03-21T06:13:15.007 に答える
1 
$("[contenteditable=true]").keydown(function(e) {
    var max = $(this).attr("maxlength");
    if (e.which != 8 && $(this).text().length > max) {
        e.preventDefault();
    }
});
于 2015-07-01T10:44:12.330 に答える
0 
var onKeyPress = function () {
    var keyCode = window.event.keyCode,
        isNumeric = (keyCode > 47 && keyCode < 58),
        isNotEnterKey = !!(window.event.keyCode !== 13);

        (isNotEnterKey) || (this.blur());

        return (isNumeric && this.innerText.length < 3);
};
于 2010-08-02T16:47:47.293 に答える
0

これは、複数のcontenteditableフィールドがターゲットクラスを使用している場合に適切に機能しないため、@user113716の回答のより一般化されたバージョンです。彼らの答えは、特定のクラスに一致するすべての要素の合計文字数をカウントするため、ページに入力できるのは合計最大文字数のみです。

このソリューションでは、一般的なクラスを使用でき、各コンテンツ編集可能フィールドの文字数を個別に制限できます。

html：

<div contenteditable="true" name="choice1" class="textfield"></div>

そしてJavaScript：

MAX_TEXTINPUT = 10;
TEXTFIELD_CLASS = "textfield"

$(document).ready(function() {

    //binding keyup/down events on the contenteditable div
    $('.'+TEXTFIELD_CLASS).keydown(function(e){ check_charcount(TEXTFIELD_CLASS, MAX_TEXTINPUT, e); });

})

function check_charcount(inputclass, max, e) {   
    var focused = $(document.activeElement)

    if(focused.hasClass(inputclass) && e.which != 8 && $(focused).text().length >= max)
    {
        e.preventDefault();
    }
}
于 2013-07-18T21:09:45.260 に答える
0

クラスで動作させたい場合。言い換えると、elementはクラス名を共有しても、独自のカウントを持つことができます。

var content_id = '.myclass';  

max = 1;
//binding keyup/down events on the contenteditable div
$(content_id).keyup(function(e){ check_charcount(this, max, e); });
$(content_id).keydown(function(e){ check_charcount(this, max, e); });

function check_charcount(elem, max, e){   
    if(e.which != 8 && $(elem).text().length >= max){       
        e.preventDefault();
    }
}
于 2014-09-14T04:31:40.200 に答える
0 
<div id="test" contenteditable="true" tabIndex="-1"></div>
  <p><span id="sy">0</span>/120</p> 
var flag = true;
 $('#test').on('compositionstart', function() {
        flag = false;
    });
    $('#test').on('compositionend', function() {
        flag = true;
    });
    $('#test').on('input', function() {
      setTimeout(function() {
        if (flag) {
          if($('#test').text().length>= 120) {
            setTimeout(() => {
              $('#test').text($('#test').text().substring(0, 120));
              var range = window.getSelection(); //创建range
              range.selectAllChildren(document.getElementById('test')); //range 选择obj下所有子内容
              range.collapseToEnd();
              $("#sy").text($('#test').text().length)
            }, 0);
          } else {
            $("#sy").text($('#test').text().length)
          }

        }
      }, 0);
    });
于 2019-10-11T07:45:47.420 に答える
0

上記の解決策はすべての場合を網羅しているわけではありません！文字数をより正確に制限したい場合は、私の軽量ライブラリを使用できます-https://github.com/antpv/contenteditable-max-length/tree/master

于 2020-12-03T21:11:25.983 に答える