htmlテーブル内で使用されるcontenteditableの文字入力を制限する方法

Question

現在、Webページ内にhtmlテーブルを使用して、ユーザーが特定の詳細を入力できるようにしています。しかし、文字入力に制限がないので、ユーザが望むだけ多くの文字を入力すると、テーブルは大きく伸びる可能性があります。

私は、これが起こらないようにこのcontenteditableを制限する方法を知りましたか？以下は

は、しかし、私が理解するのに苦労していますjQueryとアマチュアの開発者に新しいもの、私は同様の問題には、以下のリンクを発見した

<tr> 
<td>One Off Capital</td> 
<td><div contenteditable> </div></td> 
<td><div contenteditable> </div></td> 
</tr> 

テーブルのために使用していたコードのスニペットです答えはどのように与えられ、どのように使用できるのでしょうか。

Limiting Number of Characters in a ContentEditable div

Answer 1

あなたはkeypress()イベントハンドラを持つトリッキーな何かを行うことができます。コンテンツはfalse

UPDATEを返すことによって、あなたの限界値よりも大きい場合keypressイベントを防ぐ：pasteイベントにリスナーを追加します。その後、コンテンツの長さを確認します。また、コンテンツをドラッグするのを防ぐために、ドラッグオプションを防止します。

var limit = 10; 
 
$('div[contenteditable]').keypress(function() { 
 
    return this.innerHTML.length < limit; 
 
}).on({ 
 
    'paste': function(e) { 
 
    var len = this.innerHTML.length, 
 
     cp = e.originalEvent.clipboardData.getData('text'); 
 
    if (len < limit) 
 
     this.innerHTML += cp.substring(0, limit - len); 
 
    return false; 
 
    }, 
 
    'drop': function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<tr> 
 
    <td>One Off Capital</td> 
 
    <td> 
 
    <div contenteditable></div> 
 
    </td> 
 
    <td> 
 
    <div contenteditable></div> 
 
    </td> 
 
</tr>

Answer 2

、何かオーバーフローポリシーを追加します。あなたはそれを使用するCSSクラスを使用する方法を知っている場合は

<div style="width: 300px; overflow: auto;" contenteditable="contenteditable"></div> 

を。

Answer 3

私は、関数を呼び出すjQueryのbind関数を使用し「editableContentChanged」div要素には、以下のいずれかのイベントが「ブラーからkeyupペーストコピーカットのmouseup」が発生していたときに。必要に応じて、ドキュメンテーションを見て、バインド関数にイベントを追加することができます。 editableContentChanged関数は、最初に編集可能なdivの内容を置き換えてから、カーソルをコンテンツの最後に置くsetCaretメソッドを呼び出します。相続人は作業例https://jsfiddle.net/vacfkono/4/
HTML

<tr> 
<td>One Off Capital</td> 
<td><div contenteditable>fadsfasd </div></td> 
<td><div contenteditable> fasdfasd </div></td> 
</tr> 

Javascriptを/ jQueryの

$(document).ready(function() { 
     $('div').bind('blur keyup paste copy cut mouseup', editableContentChanged); 
    }); 

var maxLength = 20; 
function editableContentChanged() { 
    if($(this).html().length >= maxLength) { 
     $(this).html($(this).html().substring(0, maxLength-1)); 
     setCaret(this); 
    } 
} 

function setCaret(el) { 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(el.childNodes[0], 19); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    el.focus(); 
}