入力イベントでのIME変換の動き

In this example below you will see how to do a 入力イベントでのIME変換の動き with some HTML / CSS and Javascript

こんな動きすんの知らなかったぁ・・・ 主に日本語変換時に発生 inputイベントだと通常入力とIME変換出現の2回分イベントが発生 keydown、keyupだと1回で済むが、変換候補選択中のスペースキー入力もキーイベント229として発生する

Thumbnail
This awesome code was written by 擬音の妖精さん of neko, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 擬音の妖精さん of neko ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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);
}

Comments