Firefoxでkeyupイベントを発火させる方法

Question

Firefoxでkeyupイベントを発火させる方法はありますか？

たとえばこのようなコードです。

<div id="input" contenteditable="false">入力エリア</div>
<button type="button">クリックで入力可能</button>
<div id="output">入力の反映</div>

/*
入力を可能にする
*/
$('body').on("click",'button',function(){ 
  $("#input").attr('contenteditable',true);
});

/* 
入力内容を反映する
→Firefoxだと変換前の状態の全角が反映しない！
*/
$("#input").keyup(function(){
  var inputTxt = $("input").text();
  $("#output").text(inputTxt);
});

上のコードに限らずFirefoxでは、変換前の「あ」とか「ｓ」とかがkeyupで反応しないのですが、解決方法をご存知の方はいらっしゃいますでしょうか？

Answer 1

inputイベントを拾うと良いでしょう
(一部セレクタのtypoがあったので修正)

$(function(){
  $('body').on("click",'button',function(){ 
    $("#input").attr('contenteditable',true);
  });
  $("#input").on('input',function(){
    var inputTxt = $("#input").text();
    $("#output").text(inputTxt);
  });
});

IE対応

inputイベントにkeyupを列挙するとよいでしょう

$(function(){
  $('body').on("click",'button',function(){ 
    $("#input").attr('contenteditable',true);
  });
  $("#input").on('input keyup',function(e){
    console.log(e.type);
    var inputTxt = $("#input").text();
    $("#output").text(inputTxt);
  });
});

Comments

[beer]

inputでしたか。ありがとうございます。
ただIEでは使えないとのことでしたので次のような条件を加えたのですが、
https://jsfiddle.net/0c2nk78L/
やはりIEで動きませんで、これはどのように対処すればよろしいでしょうか？
お手数おかけし申し訳ございませんが、何か良い方法がございましたらご返信お待ちしております。

[yambejp]

IE対応追記しました

[beer]

Top notch!ありがとうございます!

Answer 2

下記質問はkeydownのケースですが、近いケースかもしれませんので、試してみてください。

• teratail:[firefox]keydownイベントが発火しない