javascript - 編集可能な div 内にキーボード ショートカットを配置する方法はありますか?

Question

たとえば、ユーザーが入力できる div があります。ユーザーがpiという単語を入力したときに、ショートカットを配置したいと思います。出力はシンボル π になります。または、ユーザーが sqrt を入力すると、このシンボル inf が得られ、出力は ∞ になります。タブボタンをクリックして数行インデントした場合でも。これを行う Web アプリはまだ見たことがありません。

Answer 1

これを達成するために実行できる広範なキー追跡とフィールド更新があります。または、(正確ではないにしても) 既に同様のことを行う jQuery プラグインを入手し、それを変更して同じタスクを達成することもできます。

これはあなたが探しているものかもしれません: http://code.google.com/p/js-hotkeys/wiki/about

Answer 2

単に置換を使用できます。ここで JSFiddle のデモを参照してください

$('.test').keydown(function (event) {
  if ($('.test').val().contains("pi")) {
    var newVal = $('.test').val().replace("pi", "π");
    $('.test').val(newVal);
    //Place Cusor at the end of the div if using editable div
  }
  else if ($('.test').val().contains("inf")) {
    var newVal = $('.test').val().replace("inf", "∞");
    $('.test').val(newVal);
    //Place Cusor at the end of the div if using editable div
  }
});

このサンプルでは、input​​. それを次のように変更できますdiv