ちょっとしたヒント: contenteditable 要素にプレーンテキストのみを入力する方法_html/css

1. 過去を振り返り、新しいことを学ぶ

何年も前、ちょっと待って、コンテンツ編集可能 (右上隅) を検索してみましょう。 contenteditable の応用である「div は textarea のテキストドメインをシミュレートして高い適応性を簡単に実現する」という記事を書きました。

すべてのブラウザでサポートされている contenteditable シミュレートされたテキストフィールドを使用すると、コンテンツの高さに応じて自動的に拡張する非常に優れたエクスペリエンスを実現できますが、HTML コンテンツを直接貼り付けることができるという大きな問題があります。以下に示すように:

前の記事では、コンテンツが純粋なテキストであることを確認するために HTML をフィルターする方法について説明しました。ただし、この方法の問題点は次のとおりです。

貼り付けの完了からフィルタリングの終了までにタイムラグがあり、ユーザーはコンテンツが一瞬で表示されるという不快な経験をします。

当時の描画は崩れていたので、上記のレベルまででした。実際、プレーンテキストのみを入力するように contenteditable 要素を制御する方が良い方法です。

2. contenteditable 属性と関係のない CSS 制御メソッド

div 要素は編集可能である必要があります。つまり、contenteditable 属性は最も一般的に使用されるメソッドです。 . 基本的にはフロントエンド作業で使用されます。しかし、CSS に通常の要素を読み取りおよび書き込み可能にする属性があることを知っている学生は、はるかに少ないのではないかと思います。

主人公が表示されます:

user-modify .

サポートされる属性値は次のとおりです:

user-modify: read-only;user-modify: read-write;user-modify: write-only;user-modify: read-write-plaintext-only;

ログイン後にコピー

そのうち、書き込み専用関係ありませんが、今の時代、基本的にブラウザのサポートはありませんし、今後もサポートされないと予想されます。 read-only は読み取り専用を意味し、通常の要素のデフォルト状態です。次に、読み取り/書き込みおよび読み取り/書き込み/平文専用により、要素がテキストフィールドのように動作し、フォーカスと入力が可能になります。

ここをクリックできます: CSS user-modify 属性の動作デモ

読み取り/書き込みおよび読み取り/書き込み平文専用の値が設定されていることがわかります。

2 つの違いは、リッチテキストを入力できるのに対し、次の要素はプレーンテキストのみを入力できることです。 Web ページからコンテンツの一部をコピーして貼り付けて見てみましょう:

OK、この時点で、この記事のタイトルに対する答えは実際にはすでに存在しています。つまり、要素を

user-modify: read-write-plaintext-only

ログイン後にコピー

に設定すると、要素を編集でき、テキストエリアのテキストフィールドのように動作するプレーンテキストのみを入力できます。

カッコいいじゃないですか！ただし、申し訳ありませんが、現在、read-write-plaintext-only 値をサポートしているのは Webkit カーネルブラウザだけです。そのため、実際の使用法は次のとおりです。

-webkit-user-modify: read-write-plaintext-only

ログイン後にコピー

モバイル端末で使用できます。、および Webkit コンテンツのみを考慮する必要があるデスクトップ Web プロジェクト。

3. 標準の contenteditable 属性値を使用した HTML 制御方法

えーっと、質問: HTML では、contenteditable でサポートされている属性値は何ですか?

TuSimple が壊れたとき、私の頭の中には contenteditable="true" と contenteditable="false" しかありませんでした。後で、私が甘すぎることに気づきましたが、新しいドラフトには他にもあることが明確に記載されていました。属性値:

contenteditable 属性は、キーワードが空の文字列 ("")、"events"、"caret"、"typing"、"plaintext-only"、"true" である列挙型属性です。追加の状態が 1 つあり、これは欠落値のデフォルト (および無効な値の継承) です。

聞かないでください。「イベント」と「キャレット」が何のためにあるのかはわかりませんが、「プレーンテキストのみ」については知っています。エディターにそのエリアにプレーンテキストのみを入力させることはできます。ここではデモは必要ありません。下のボックスを試して、リッチテキストを作成できるかどうかを確認してください。

contenteditable=""contenteditable="events"contenteditable="caret"contenteditable="plaintext-only"contenteditable="true"contenteditable="false"

ログイン後にコピー

予期せずリッチテキストを取得できる場合は、Chrome 以外のブラウザを使用していることを意味します。

つまり、contenteditable="plaintext-only" は、CSS-only -webkit-user-modify: read-write-plaintext-only と同じです。現在、Chrome ブラウザーでのみサポートされています。

<div contenteditable="plaintext-only"></div>

ログイン後にコピー

ですから、もしあなたのプロジェクトにまだ多くの IE8 ブラウザユーザーがいるのであれば、素晴らしいものをすぐに使用できないのは残念でなりません。最後の手段として、次の方法を模索する必要があります。

4. ペーストイベントを制御するための JS 制御メソッド

単にキーボードをタップした場合、入力内容は実際にはプレーンテキストです。たとえば、いくつかの特別な状況を除いて、IE ブラウザの下の編集ボックスは、修飾された URL アドレスへのリンクを自動的に追加します。リッチテキスト汚染は主にコピー＆ペースト時に発生します。そのため、ペースト時にクリップボード内のコンテンツに対して HTML フィルタリングを実行し、コンテンツを手動で挿入できれば、入力できない問題は完全に解決できるのではないでしょうか。リッチテキストに問題がありますか? ?

于是，鄙人不才，一番折腾，弄出了下面的代码：

$('[contenteditable]').each(function() {    // 干掉IE http之类地址自动加链接    try {        document.execCommand("AutoUrlDetect", false, false);    } catch (e) {}        $(this).on('paste', function(e) {        e.preventDefault();        var text = null;            if(window.clipboardData && clipboardData.setData) {            // IE            text = window.clipboardData.getData('text');        } else {            text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');        }        if (document.body.createTextRange) {                if (document.selection) {                textRange = document.selection.createRange();            } else if (window.getSelection) {                sel = window.getSelection();                var range = sel.getRangeAt(0);                                // 创建临时元素，使得TextRange可以移动到正确的位置                var tempEl = document.createElement("span");                tempEl.innerHTML = "&#FEFF;";                range.deleteContents();                range.insertNode(tempEl);                textRange = document.body.createTextRange();                textRange.moveToElementText(tempEl);                tempEl.parentNode.removeChild(tempEl);            }            textRange.text = text;            textRange.collapse(false);            textRange.select();        } else {            // Chrome之类浏览器            document.execCommand("insertText", false, text);        }    });});

ログイン後にコピー

兴趣使然，目前还没再真实项目中实践过，因此，可能还有瑕疵或者缺陷。自己在demo上，IE8+，Chrome等浏览器都测试过，都是可以的。对了，demo要先放出来。

您可以狠狠地点击这里： contenteditable元素纯文本输入控制demo

demo页面有个框框，大家可以试试看，是不是只能弄进去纯文本。

关于代码的一些说明

一开始的 $('[contenteditable]').each() 只是示意，，里面的核心代码与jQuery没有任何关系，大家可以灵活介入自己项目。
IE浏览器的 contenteditable 框有个问题，会自动添加链接，我们需要的是纯文本，显然这种自以为是的行为不是我们要的，可以使用 document.execCommand("AutoUrlDetect", false, false) 来进行处理。
理想情况应该直接使用 document.execCommand("insertText") 命令插入内容。但是，但是，IE浏览器虽然运行这段代码没有出错，也是支持 document.execCommand 的，但是，却没有插入内容的表现。也不知道是不是我打开的方式不对，后来，我就寻求更传统的方法，创建文本选区与插入，正好，就IE支持 document.body.createTextRange …
document.selection IE浏览器一直是支持的，直到IE11浏览器，直接废弃了，好在 window.getSelection 还活着，于是，又一次分情况处理。
获得剪切板数据，不同浏览器情况也不一样，这里不赘述了，因为已经1点多了，年纪大了，实在熬不住了……
兼容性甩CSS方法和HTML方法两条街，我自己使用的浏览器都测过没问题，当然，demo比较简单，测试可能不能说明全部问题。