以下のコードは正常に動作していますが、10 文字を超える文字列を貼り付ける場合、最初の 10 文字のみを貼り付ける必要があります。現在、これは行われていません。10 文字を超える文字が貼り付けられないようにするにはどうすればよいですか?
3 に答える
述べたように、<textarea maxlength="10">
は少量のケースで機能しますが、すべてではありません。
ユーザー (たとえば、Firefox) がテキスト領域に入り、ブラウザ メニューEdit
を選択してから をクリックするのを防ぐ方法を判断するのは困難Paste
です。私はそれを防ぐ方法について本当に途方に暮れています。ctrl
+を防ぐために keydown イベントを確認できますv
。コンテキスト メニューを無効にして、テキスト領域の右クリックを禁止することができます (ただし、悪意のあるユーザーがフロント エンドの JavaScript を編集して、この機能を再度有効にすることができます)。
つまり、適切な方法でユーザーの貼り付けを防止する普遍的な方法はありません。
ただし、解決策をハックすることもできます (本当にやりたいことを続ける方法がないと思われる場合は、常に私のお気に入りです)。これから提案するこのアプローチは、実行しているタイマーの数によって異なります。アニメーション用に複数のタイマーがある場合、Google は、それらすべてを 1 つのタイミング ユニットにまとめて、他のタイマーが派生するようにすることをお勧めします。この場合は、タイマーをリファクタリングしてください。
グローバル タイマーを実装します。そのタイマーに基づいて 25ms ごとに実行される関数を実装します。テキストエリアの内容をキャッシュします。それらの内容が変更されたかどうかを確認します。
テキストエリア
<textarea id="maintextarea"></textarea>
脚本
/*init*/
var globalTimer = new Date();
var cachedText = document.getElementById("maintextarea").value;
var iterationCount = 0;
function cacheText() {
cachedText = document.getElementById("maintextarea").value;
}
function upDateTimer() {
globalTimer = new Date();
var timerTimeout = setTimeout('upDateTimer()', 5);
timeBasedOperations();
}
upDateTimer();
function timeBasedOperations() {
iterationCount++;//this will allow timing to occur
//TODO: Add in other timers calls based on global timer
if (iterationCount % 5) {//every fifth iteration (hence 25ms)
checkTextArea();
}
}
function checkTextArea() {
var currentText = document.getElementById("maintextarea").value;
var textArea = document.getElementById("maintextarea");
if (currentText.length > cachedText.length) {
//TODO: Add additional logic for catching a paste or text change
textArea.value = currentText.substr(0, 10);
}
cacheText();
}
これはタイマーを実装していますが、これは非常に実用的なソリューションだと思います。また、たまたま機能します(テスト済み)。
:)
ブラウザーからクリップボード バッファーをのぞき見ることはできないため、現在のように 10 文字に制限するしかありません。javascript の文字カウントの代わりに maxlength="10" 属性を使用してください。
<textarea maxlength="10"></textarea>