web-dev-qa-db-ja.com

プレーンテキストのみを許可するコンテンツ編集可能

プレーンテキストのみを受け入れるcontenteditableを作成しようとしています。

貼り付けイベントをリッスンしてから、すべてのhtmlを削除し、プレーンテキストとしてのみcontenteditableに貼り付けます。

それを行うために、類似の質問への回答に基づいた2つの異なるアプローチを既に試しましたが、これらの2つのアプローチには問題があります。

最初：これは「ペースト」リスナーを使用せず、代わりに入力をリッスンしています（この場合は理想的ではありません）、これは回避する解決策でした Clipboard API を使用します。

問題：これはchromeで動作しますが、Firefoxでは動作しませんIEでは、htmlをコピーして貼り付けると、htmlが正常に削除され、テキストのみが貼り付けられますが、テキストの書き込みを続けると、キャレットは常にcontenteditableの先頭に移動します。

function convertToPlaintext() {
  var textContent = this.textContent;
  this.textContent = textContent;
}

var contentEditableNodes = document.querySelectorAll('.plaintext[contenteditable]');

[].forEach.call(contentEditableNodes, function(div) {
  div.addEventListener("input", convertToPlaintext, false);
});

あなたはそれをここで試すことができます/私が基づいているコード：http://jsbin.com/moruseqeha/edit?html,css,js,output

Second：最初のイベントは失敗し、「貼り付け」イベントのみをリッスンしていないので、試してみることにしました- クリップボードAPI 。ここでの問題は、on IEdocument.execCommand（ "insertHTML"、false、text）;が機能しないように見えることです。これは機能します。クロム、Firefox（v41およびv42でテスト済み）、およびEdge。

document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = "";
  if (e.clipboardData && e.clipboardData.getData) {
    text = e.clipboardData.getData("text/plain");
  } else if (window.clipboardData && window.clipboardData.getData) {
    text = window.clipboardData.getData("Text");
  }
  document.execCommand("insertHTML", false, text);
});

ここで試すことができます： http://jsfiddle.net/marinagon/461uye5p/

誰かがこの問題のいくつかの解決策を見つけるのを手伝ってもらえますか？

textareaを使用できることは承知していますが、使用しない理由があります。

更新-ソリューションが見つかりました

2番目のアプローチの解決策を見つけました。 document.execCommand（ "insertHTML"、false、text）;はIE別のソリューションを検索して見つけたこれ https://stackoverflow.com/a/2925633/4631604 。

ここでは、すべてのブラウザでソリューションが正常に機能する2番目のアプローチを見ることができます http://jsfiddle.net/marinagon/1v63t05q/

javascriptcontenteditable
23
Marina

貼り付けられたデータをクリーンアップするダーティハック。

function onpaste(e, el){
      setTimeout(function(){
            el.innerText = el.innerText;
        }, 10);
}
6
Kristiyan Gospodinov

ContentEditable要素の代わりに textarea 要素を使用します。 （エンファシス鉱山）

textarea要素は、要素の生の値の複数行プレーンテキスト編集コントロールを表します。

例：

/* Auto resize height */
var textarea = document.querySelector('textarea');
(textarea.oninput = function() {
  textarea.style.height = 0;
  textarea.style.height = textarea.scrollHeight + 'px';
})();
textarea { width: 100%; }
<textarea>Hello! You can edit my content. But only plain-text!!!</textarea>
2
Oriol