<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>入力イベントでのIME変換の動き</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<label>イベントタイプ：<select id="sect">
<option name="keyup" selected>keyup</option>
<option name="keydown">keydown</option>
<option name="input">input</option>
</select></label><br>
<label>入力：<input id="inp" type="text"></label>
<p>keyup、keydownの場合はkeyCodeの取得が可能なため変換の有無をある程度判定可能</p>
<p>inputの場合、keyCodeが取得できないうえ、IME変換時に入力イベントが2度発生する<br>
（IMEの出現が入力というか、入力文字列の変更として認識されてる?）
</p>
<p>変換候補の選択中（スペースキー）にもkeyup、keydownはイベントを発生させる</p>
<ul id="log">
<li>LOGs</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/neko_sugar310gb/andx5165andx529bandx30a4andx30d9andx30f3andx30c8andx3067andx306eimeandx5909andx63dbandx306eandx52d5andx304d-vjgNWX */
#log{
position:relative;
top:100px;
}
/*Downloaded from https://www.codeseek.co/neko_sugar310gb/andx5165andx529bandx30a4andx30d9andx30f3andx30c8andx3067andx306eimeandx5909andx63dbandx306eandx52d5andx304d-vjgNWX */
var sect=document.getElementById("sect"),
inp=document.getElementById("inp"),
log=document.getElementById("log"),
evetype="";
function eveadd(t){
if(evetype==t){
return
}else{
inp.removeEventListener(evetype,inp_eve)
evetype=t;
inp.addEventListener(evetype,inp_eve);
}
};eveadd(sect.value);
sect.addEventListener("change",function(){
eveadd(this.value);
});
function inp_eve(e){
var creL=document.createElement("li");
creL.innerHTML="key:"+e.keyCode+"・"+this.value;
log.insertBefore(creL,log.firstChild);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v3.3.1
