Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

contenteditable="plaintext-only"

contenteditable="plaintext-only" は要素のコンテンツ編集をプレーンテキストに限定し、書式付きテキストの貼り付けを防止します。

その他

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contentEditable (plaintext-only)
51
12
136
5.1
51
5
HTML 属性
plaintext-only

contenteditable="プレーンテキストのみ"`。
51
12
136
5
51
4.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<div contenteditable="plaintext-only"
  style="border:1px solid #ccc; padding:0.5rem; min-height:3rem;">
  Only plain text can be edited here
</div>

ライブデモ

プレーンテキストのみの編集

contenteditable=plaintext-only でリッチテキスト入力を防止。

プレビュー全画面表示

メモ帳風エディタ

plaintext-only でシンプルなテキストエディタを作成。

プレビュー全画面表示

true と plaintext-only の違い

リッチテキスト許可とプレーンテキスト強制の動作比較。

プレビュー全画面表示

実務での使いどころ

  • contenteditable="plaintext-only" の活用

    contenteditable=plaintext-only。プレーンテキストのみの編集モード。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク