JavaScriptでdivタグのテキストを書き換えた際、キーボードから文字を入力した時のような振る舞いをさせたい

Question

前提・実現したいこと

とあるWebサイトのhtmlに対して、スタイル変更やテキスト入力支援を行う拡張プログラムを作成しています。
(※そのwebサイトのプログラムはもちろん私には変更不可)

<div>タグのテキストをJavascript側から設定した際、 キーボードから文字を入力した時と同じような振る舞いをさせたいです。

発生している問題

<div>タグのテキストをJavascript側から設定し、実際に見た目も変わったのですが、 html側に「テキストが変更された」という認識をさせられていません。

キーボードから入力する場合は、変更を感知して「元に戻す」や「登録する」といった処理が可能になるのですが、
変更を認識させられていないので、それらができません。

これをJavascript側の処理で、キーボードから文字を入力した時のように
「テキストが変更された」とhtml側に伝えたいです。

該当のソースコード

Webサイト側

<div id="details" contenteditable="true" aria-multiline="true" role="textbox" aria-label="入力してください"></div>

拡張プログラム側

$("#details").html("Hello World.");

試したこと

的外れだと思うのですが

・html書き換え後にJavascript側からページリロードする。
・.text()やinnerHtml()など別な方法で書き換える。

的確な方法が分からず、とりあえず色々弄ってみてやはり駄目でした。

Comments

[m.ts10806]

>「テキストが変更された」とhtml側に伝えたいです。

結局何のためにそうしたいのか分からないので謎の表現になっています。
どうしてそうしたいのか、それを実現することによって何をしたいのか
要件を具体的に書いてください。（できれば擬人的な表現ではなく、起きる動作の順で）

[FakeNinja]

情報足らず・表現不足で申し訳ございませんでした。

1: 既存html(他社様のサービス。APIは用意されていない)のテキスト入力欄に、
今は毎回手作業で入力している。

2: それは面倒だから、Chromeエクステンションを作成して、
コンテキストメニューに「登録済みのデータを貼り付け」というようなものを追加。
入力作業を楽にしたい。

というのが、作成したいプログラムになります。

■ 現状

1: コンテキストメニュー「登録済みのデータを貼り付け」をクリック。

2: javascript側からhtmlを書き換えて、テキストを挿入。

3: htmlに挿入したテキストが表示される。

ここまでは出来ました。

■ 問題

キーボードから文字を入力した場合、1文字でも入力されるとそれを検知して
「元に戻す」「登録する」などのボタンがアクティブになったり、特定の領域のスタイルが変わったり、処理に必要なデータが隠しパラメータとして埋め込まれたりする。
しかしjavascriptからhtmlを書き換えるとそれが起こらない。

■ やりたい事

javascriptからhtmlを書き換えて文字を挿入した場合でも、
キーボードから文字を入力した時と同じ状態にしたい、というのがやりたい事になります。

単純に2~3個のボタンをアクティブにしたり、スタイルを変えるだけならば
javascriptから属性やスタイルを書き換えれば済むのですが、他にも様々な処理を行っているので、
それらを全て把握し対応するのは困難だと思い、このような質問を投稿させていただいた次第でございます。

「html側に変更があった事を認識させたい」というのは、
keyupイベントを起こすようなイメージでおりました。

Answer 1

keyupイベントを起こすようなイメージでおりました。

そのイベントをtriggerさせればいいのではないでしょうか。

Comments

[FakeNinja]

以下のコードを実行してみたのですが

```Javascript
const e = jQuery.Event("keyup");
e.which = 13;
e.keyCode = 13
$("#details").trigger(e);
```

無反応でエラーメッセージも表示されなかったため調べてみると、divタグに対しては

・tabindexが設定されていないといけない(0ではいけない)
・フォーカスが当たっていないといけない

という情報を見つけ、更にフォーカスを当ててsetAttribute("tabindex", 1)を追加しました。
しかしやはり無反応でエラーメッセージも表示されませんでした。

すみません。今は、そもそも考える方向性がそもそもあっているのか、何の処理をすべきなのか、と
漠然とした状態になってしまっているので、もうしばらく調査してみます。