Chrome で使える textInput イベント
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ バックスペースは反応しないテキストを入力した時だけに発生するイベント
◆ 順番は input より先
◆ もちろん keydown や keypress よりは後
◆ addEventListener でしか設定できないみたい
◆ Firefox では使えない
◆ 順番は input より先
◆ もちろん keydown や keypress よりは後
◆ addEventListener でしか設定できないみたい
◆ Firefox では使えない
Command Line API を見ていると monitorEvents の中に textInput なるものが
command line api は Chrome の devtools のコンソールで使える関数達です
を実行したら
この __commandLineAPI オブジェクトに色々関数が用意されているので グローバル関数にあるように使えます
それで monitorEvents は DOM のオブジェクトとイベント名を渡すと イベントが起きた時にイベント名と渡されるイベントオブジェクトを console.log してくれます
addEventListener で console.log つけても一緒ですが ちょっと短く書けます
また mouse や key といった本来存在しないイベント名を渡せて マウス関連全部に設定やキーボード関係全部に設定というのができます
oninput は知っていましたが textInput は初めて聞きました
最近はプロパティの onXXXX 系に存在しないイベントが増えているので 増えたことに気づきにくいです
(私の情報源の半分くらいは Chrome の補完候補ですので……)
とりあえず試してみます
基本は input と一緒ですが BackSpace では反応しません
本当にテキストを入力されたときだけです
また input より先に textInput が発生します
イベントの付け方は addEventListener に "textInput" を設定すれば使えます
ontextinput や ontextInput や onTextInput は反応なしです
また Firefox では input だけで textInput は使えませんでした
monitorEvents
簡単に説明command line api は Chrome の devtools のコンソールで使える関数達です
console.log(1)
を実行したら
with (typeof __commandLineAPI !== 'undefined' ? __commandLineAPI : { __proto__: null }) {
console.log(1)
}
こういう風に実行されていますconsole.log(1)
}
この __commandLineAPI オブジェクトに色々関数が用意されているので グローバル関数にあるように使えます
それで monitorEvents は DOM のオブジェクトとイベント名を渡すと イベントが起きた時にイベント名と渡されるイベントオブジェクトを console.log してくれます
addEventListener で console.log つけても一緒ですが ちょっと短く書けます
また mouse や key といった本来存在しないイベント名を渡せて マウス関連全部に設定やキーボード関係全部に設定というのができます
textInput
この monitorEvents の key イベントのリストを見ると"keydown", "keyup", "keypress", "textInput"
oninput は知っていましたが textInput は初めて聞きました
最近はプロパティの onXXXX 系に存在しないイベントが増えているので 増えたことに気づきにくいです
(私の情報源の半分くらいは Chrome の補完候補ですので……)
とりあえず試してみます
var i = document.createElement("input")
i.oninput = function(){console.log("input")}
i.ontextinput = function(){console.log("textinput")}
i.ontextInput = function(){console.log("textInput")}
i.addEventListener("textInput", function(){console.log("al-textInput")})
document.body.appendChild(i)
i.oninput = function(){console.log("input")}
i.ontextinput = function(){console.log("textinput")}
i.ontextInput = function(){console.log("textInput")}
i.addEventListener("textInput", function(){console.log("al-textInput")})
document.body.appendChild(i)
[a]
al-textInput
input
[Enter]
[Escape]
[Space]
al-textInput
input
[BackSpace]
input
[Left]
[Top]
[コピペ]
al-textInput
input
al-textInput
input
[Enter]
[Escape]
[Space]
al-textInput
input
[BackSpace]
input
[Left]
[Top]
[コピペ]
al-textInput
input
基本は input と一緒ですが BackSpace では反応しません
本当にテキストを入力されたときだけです
また input より先に textInput が発生します
イベントの付け方は addEventListener に "textInput" を設定すれば使えます
ontextinput や ontextInput や onTextInput は反応なしです
また Firefox では input だけで textInput は使えませんでした