0 Downloads
27 Views
Tweet
Download Now View Demo

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

More from 擬音の妖精さん of neko

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

Technologies

Comments

More from 擬音の妖精さん of neko

A Pen by 擬音の妖精さん of neko

A Pen by 擬音の妖精さん of neko

A Pen by 擬音の妖精さん of neko

A Pen by 擬音の妖精さん of neko

You Might Also Like

Cute Punnies

Perfil TDH

TableFilter sort numeric column with empty values

Poly Template [WIP]

Task 52

Critical bug Gong

Image / Album Gallery

Material background