概要

jQuery.mcInputEventについて

特徴

Internet Explorer系においてのinputイベントをChromeや、Firefoxと同じようなタイミングで発火するようにします。
IME入力中に発火しない独自イベント(mcinput)を備えます。
input、textareaからの発火か、contenteditable="true" を設定したエレメントからの発火からを判定することができます。
input、textareaからの発火か、contenteditable="true" を設定したエレメントからの発火からに関わらずエレメントの最終値を簡単に取得できます。

IE系でinputイベントが発火しないタイミング(jQuery.mcInputEventで修正されるもの)

IE9

BackSpace、Deleteキーでの文字の削除
「切り取り」「Ctrl+x」
「元に戻す」「Ctrl+z」
選択した範囲を別のエレメントにドロップして内容が変わったとき

IE全般

contenteditable="true"を設定したエレメント
ESCキーで入力文字列が取り消されたとき
IME入力終了時

確認済みのブラウザ

「windows7 64bit」で下記のブラウザを使用して確認しています

Chrome
Firefox
Internet Explorer11
Internet Explorer9(Internet Explorer11でエミュレーション)

バグや改善項目がありましたら、GitHubのissueにあげてもらえると助かります。

はじめ方

プラグインの読み込み・適用

プラグインの読み込み

<script src="path/to/jquery.mcInputEvent.js"></script>

エレメントへプラグインの適用

$(element).mcInputEvent();

プラグインイベントの再適用

$(element).mcInputEvent("on");

プラグインイベントの一時不使用

$(element).mcInputEvent("off");

プラグイン適用の破棄

$(element).mcInputEvent("destroy");

プラグインイベントの強制発火

$(element).mcInputEvent("triggerEvent");

イベントの取得

// IME入力中以外でエレメントの値が変わった時のイベントを取得
$(element).on("mcinput", function (event) {
  // ここに何かの処理

  // イベントを発火したエレメントのタイプを取得する
  event.tagType
    input → input, textarea
    html  → input, textarea以外

  // イベントを発火したエレメントの値を取得する
  event.lastVal
    input, textarea → $(this).val();の値と同じ
    input, textarea以外 → $(this).html();の値と同じ
});

// inputイベントの代わりのイベントを取得
$(element).on("input2", function (event) {
  // ここに何かの処理

  // イベントを発火したエレメントのタイプを取得する
  event.tagType
    input → input, textarea
    html  → input, textarea以外

  // イベントを発火したエレメントの値を取得する
  event.lastVal
    input, textarea → $(this).val();の値と同じ
    input, textarea以外 → $(this).html();の値と同じ
});

// inputイベントを取得
// イベントを発火したエレメントのタイプやエレメントの値を取得することは出来ない
$(element).on("input", function () {
  // ここに何かの処理

});

デモ

<input type="text">のデモ

<div class="form-group">
  <input type="text" id="mcinput-input" class="mcinput form-control">
  <input type="checkbox" id="boot-switch-input" class="boot-switch" checked>
</div>
<p>上記のフォームに文字を入力するとイベント発火時に下記にイベント名が追記されます</p>
<pre id="pre-input" class="pre"></pre>
<button id="btn-clear-input" class="btn btn-default" type="button">クリア</button>

// mcInputEventの適用
$('#mcinput-input').mcInputEvent();
// イベント発生時の処理
$('#mcinput-input').on('input input2 mcinput', function (e) {
  // preエリアにテキストを追記
  var preStr = $('#pre-input').text();
  $('#pre-input').text(
    preStr !== '' ? preStr + '\n' + e.type : e.type
  );
});
// オン・オフスイッチの設定
$('#boot-switch-input').bootstrapSwitch({
  labelText: 'イベント',
  offColor: 'danger',
  onSwitchChange: function (event, state) {
      state ? $('#mcinput-input').mcInputEvent('on') :
              $('#mcinput-input').mcInputEvent('off');
  }
});
// クリアボタン
$('#btn-clear-input').on('click', function () {
  $('#pre-input').text('');
  $('#mcinput-input').val('');
});

<textarea></textarea>のデモ

<div class="form-group">
  <textarea id="mcinput-textarea" class="mcinput form-control"></textarea>
  <input type="checkbox" id="boot-switch-textarea" class="boot-switch" checked>
</div>
<p>上記のフォームに文字を入力するとイベント発火時に下記にイベント名が追記されます</p>
<pre id="pre-textarea" class="pre"></pre>
<button id="btn-clear-textarea" class="btn btn-default" type="button">クリア</button>

// mcInputEventの適用
$('#mcinput-textarea').mcInputEvent();
// イベント発生時の処理
$('#mcinput-textarea').on('input input2 mcinput', function (e) {
  // preエリアにテキストを追記
  var preStr = $('#pre-textarea').text();
  $('#pre-textarea').text(
    preStr !== '' ? preStr + '\n' + e.type : e.type
  );
});
// オン・オフスイッチの設定
$('#boot-switch-textarea').bootstrapSwitch({
  labelText: 'イベント',
  offColor: 'danger',
  onSwitchChange: function (event, state) {
      state ? $('#mcinput-textarea').mcInputEvent('on') :
              $('#mcinput-textarea').mcInputEvent('off');
  }
});
// クリアボタン
$('#btn-clear-textarea').on('click', function () {
  $('#pre-textarea').text('');
  $('#mcinput-textarea').val('');
});

<div contenteditable="true"></div>のデモ

<div class="form-group">
  <div id="mcinput-div" class="mcinput" contenteditable="true"></div>
  <input type="checkbox" id="boot-switch-div" class="boot-switch" checked>
</div>
<p>上記のフォームに文字を入力するとイベント発火時に下記にイベント名が追記されます</p>
<pre id="pre-div" class="pre"></pre>
<button id="btn-clear-div" class="btn btn-default" type="button">クリア</button>

// mcInputEventの適用
$('#mcinput-div').mcInputEvent();
// イベント発生時の処理
$('#mcinput-div').on('input input2 mcinput', function (e) {
  // preエリアにテキストを追記
  var preStr = $('#pre-div').text();
  $('#pre-div').text(
    preStr !== '' ? preStr + '\n' + e.type : e.type
  );
});
// オン・オフスイッチの設定
$('#boot-switch-div').bootstrapSwitch({
  labelText: 'イベント',
  offColor: 'danger',
  onSwitchChange: function (event, state) {
      state ? $('#mcinput-div').mcInputEvent('on') :
              $('#mcinput-div').mcInputEvent('off');
  }
});
// クリアボタン
$('#btn-clear-div').on('click', function () {
  $('#pre-div').text('');
  $('#mcinput-div').html('');
});