[解決済み] contenteditableを使用したonChangeイベント [重複]。
2022-02-18 06:13:41
質問
のようなコード。
...text <span contenteditable="true" onChange="someFunction()">blah blah</span> text...
onChangeイベントが動作しない。(少なくとも FireFox では)
textarea/inputタグは使いたくありません。なぜなら、テキスト中の特定の単語だけを変更でき、インラインで表示されなければならないからです(ブロックではありません)。
そのような方法はありますか?
どのように解決するのですか?
私が書いた関数です。
この関数を1回呼び出すと、ページ内のすべてのContentEditable要素が修正されます。
function fix_onChange_editable_elements()
{
var tags = document.querySelectorAll('[contenteditable=true][onChange]');//(requires FF 3.1+, Safari 3.1+, IE8+)
for (var i=tags.length-1; i>=0; i--) if (typeof(tags[i].onblur)!='function')
{
tags[i].onfocus = function()
{
this.data_orig=this.innerHTML;
};
tags[i].onblur = function()
{
if (this.innerHTML != this.data_orig)
this.onchange();
delete this.data_orig;
};
}
}
関連
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み] contenteditable変更イベント