[解決済み] execCommandで「プレーンテキストとして貼り付ける」ためのJavascriptのトリック
2022-08-07 05:13:02
質問
私は
execCommand
をベースにした基本的なエディタです。の中にテキストを貼り付けるには、3つの方法があります。
execCommand
のエリアにテキストを貼り付けるには、3つの方法があります。
- Ctrl + V
- 右クリック -> 貼り付け
- 右クリック -> プレーンテキストとして貼り付け
HTMLマークアップのないプレーンテキストのみを貼り付けられるようにしたいです。最初の2つの操作でPlain Textを貼り付けるように強制するにはどうしたらよいでしょうか。
可能な解決策 私が思いつく方法は、キーアップイベントのリスナーを設定することです。 Ctrl + V というように、HTMLタグを削除してから貼り付けます。
- これは最良の解決策ですか?
- 貼り付けに HTML マークアップを使用しないことは、防弾対策になりますか?
- 右クリック -> 貼り付けにリスナーを追加する方法は?
どのように解決するのですか?
を傍受します。
paste
イベントをキャンセルし
paste
をキャンセルし、手動でクリップボードのテキスト表現を挿入します。
http://jsfiddle.net/HBEzc/
.
これが一番信頼できるはずです。
- これはあらゆる種類の貼り付けを捕捉します ( Ctrl + V コンテキストメニューなど)
- クリップボードのデータを直接テキストとして取得できるので、HTMLを置き換えるような醜いハックをする必要がありません。
クロスブラウザのサポートはよくわからないけど。
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});
関連
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] オブジェクトをメンバーとして、プレーンなJavaScriptオブジェクトをループさせる方法
-
[解決済み] 貼り付けイベントでクリップボードのデータを取得するJavaScript (クロスブラウザ)
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み] input type="text "でonchange as-you-typeを追跡する最良の方法?
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 貼り付けイベントでクリップボードのデータを取得するJavaScript (クロスブラウザ)
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] イテレータでmap()を使用する