contenteditable=plaintext-onlyジェネレーターとは
contenteditable=plaintext-only属性は、ユーザーが編集可能なHTML要素を作成しますが、リッチテキストフォーマット（太字、斜体、色、フォント）を受け入れるcontenteditable=trueとは異なり、plaintext-onlyは貼り付け時にすべてのフォーマットを削除します。ユーザーがWord、Google Docs、またはウェブページからフォーマットされたテキストをコピーしてplaintext-onlyエディタに貼り付けると、貼り付けられたコンテンツはプレーンテキストのみになります。HTMLタグ、インラインスタイル、フォントフォーマットはすべて削除されます。この動作はブラウザに組み込まれており、JavaScriptはまったく必要ありません。
クイックアンサー
contenteditable=plaintext-onlyを使用して、プレーンテキストのみを受け入れる編集可能なリージョンを作成します。フォーマットされたコンテンツを貼り付けると、すべてのHTMLタグとインラインスタイルが自動的に削除されます。JavaScriptは不要です。Chrome 120+、Edge 120+、Safari 17.4+、Firefox 136+でサポートされています。古いブラウザではリッチテキスト編集にグレースフルデグラデーションします。生成されたHTMLには、プレースホルダーCSS、フォーカススタイル、ARIA属性、オプションのフォールバック検出が含まれています。
Last updated: 2026-06-01
制限事項
- Firefoxバージョン136より前ではサポートされていません。この属性はcontenteditable=trueにグレースフルデグラデーションするため、古いFirefoxバージョンのユーザーはプレーンテキストエディタの代わりにリッチテキストエディタを目にします。これらのユーザー向けにJavaScript貼り付けインターセプタを安全策として追加してください。
- plaintext-onlyはオールオアナッシングのアプローチです。一部のフォーマット（改行など）を許可しながら他（太字やフォントなど）をブロックすることはサポートしていません。選択的フィルタリングには、beforeinputイベントを使用したカスタムソリューションが必要です。
- ブラウザの実装はエッジケースで異なる場合があります。たとえば、貼り付け時の末尾の空白、複数スペース、特殊なUnicode文字の処理方法などです。ユーザーが最も貼り付ける可能性が高いコンテンツの種類でテストしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- エディタモードを選択します。plaintext-only（貼り付け時にすべてのフォーマットを削除）または通常のcontenteditable（リッチテキストを保持）。いずれかのモードまたは両方を並べて比較するHTMLを生成します。
- エディタが空のときに表示されるプレースホルダーテキストを設定し、プレースホルダーのCSS色とスタイルをデザインに合わせてカスタマイズします。
- フォーカススタイル（アウトライン、ボーダー色、ボックスシャドウ）を設定します。これらはエディタがフォーカスを受け取ったときに作動します。スクリーンリーダーのアクセシビリティのためにARIAラベルを含めます。
- 生成されたHTMLマークアップをコピーします。このツールは、plaintext-onlyをまだサポートしていないブラウザ向けのフォールバック検出を処理する関連CSSを含む、完全で自己完結型のスニペットを提供します。
主な用途
- ユーザーがページレイアウトを壊したり隠れたHTMLを導入したりするフォーマット済みテキストを貼り付けるべきではないコメントフィールドやディスカッションフォーラム。
- 生のテキストが期待され、リッチフォーマットが不要なノイズとなるコードスニペット入力や設定エディタ。
- フォーマットが複雑さを増すだけでメリットのない社内メモツールやCMSプレーンテキスト説明文。