HTMLフォームにキーボードイベントでキー値を突っ込む(出来ないから代替案

2021-12-15 更新

最近のブラウザで動くやつについてはこちら → HTMLフォームのinputにイベントで文字列の値を突っ込む - それマグで！

Form のinput に値を突っ込みたい

form の input に値を突っ込みたい。しかし ITバブル時代だよって感じのアクセスはしたくない

document.forms[0].element[0].value= 123456;
document.my_form.element[0].value= 123456;

form name="my_form" と id="my_form" のごちゃ混ぜ時代には戻りたくない！

querySelecorやXpathでノード抜き出してもやっぱりvalue

document.querySelector("form[name=my_form] input[name=my_text]").value

せっかくだから、value に値を突っ込む以外の方法で、テキストを入力できないのかと、思って調べてみた。そうだ、keyEventを送信してみては！

keyEvent をdispatchEventしてみた

input にたいして、keyEventをdispatchEventした。

もちろんkeypress のイベントリスナーは反応してくれた、しかし肝心の文字が入ってくれない。さてどうするか。

textInput という便利なEventが！

テキストを入力を実現するEventがDOM Eventに存在した。

var textEvent = document.createEvent('TextEvent');
textEvent.initTextEvent ('textInput', true, true, null, "0901234568", 9, "en-US");
document.querySelector("#tel").dispatchEvent(textEvent);

おお入力できるぜ

サンプル

focusとblurをうまく組み合わせれば、これはテストに便利かもしれない？

jQuery入ってるとaddEventListener が期待通りに動いてくれないので、ちょっと動作がおかしいのかもしれない。あとで調べる。

2021-11-05

textEvent.initTextEvent はセキュリティ上の理由で動かなくなったみたいなので。代替案を取り出してみる。

document.querySelector('#tel001').focus()
document.execCommand('insertText', false, "090123456");