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

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

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

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

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

1. 貼り付けの完了からフィルタリングの終了までにタイムラグがあり、ユーザーはコンテンツが一瞬で表示されるという不快な経験をします。
カーソルの位置が変わります 変化は以前のフォーカス位置ではなくなります;

当時の描画は崩れていたので、上記のレベルまででした。実際、プレーン テキストのみを入力するように 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比较简单，测试可能不能说明全部问题。

五、结束无关紧要八卦念

昨晚打篮球，被同事肘击了下巴，开口，血如柱下，缝了3针。其实这点皮外伤没什么的，重要的也是麻烦的是，媳妇知道了，勒令2个月不准打篮球，这次抱大腿都没用了，队友也让我好好服刑。

今天小朋友有些发烧，媳妇有些着急，我评估了下，应该没什么大问题，算是自我成长的第一关吧，加油！

这篇文章实际上插队了，前面还有一篇比较深入的文章，那个要写好久的。

好了，就说这么多。欢迎反馈，感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： http://www.zhangxinxu.com/wordpress/?p=5120

（本篇完）