2

「編集可能」のIDでcontenteditableであるdivがあります。ユーザーが入力した結果が欲しいのですが、物理的なキーイベントではなく、事前に決定されたメッセージが表示されます。

たとえば、あらかじめ決められたメッセージが「歌う」という単語の場合、ユーザーが最初に入力した文字に関係なく、最初に表示される文字は「S」です。2回目のキーを押すと、「i」が表示されます。等々。

このフォーラムで、キーイベントに関連付けられた文字の変更をシミュレートするコードを見つけました。また、例の「S」を実現するようにコードを変更しました。以下のコードを貼り付けて、ここに作成しました：http: //jsfiddle.net/Ukkmu/61/

もちろん、このコードは私に「S」を無限に与えます。私が立ち往生しているのは、この関数を1回だけ実行してから、「i」、「n」などの別の関数を呼び出すことです。
トグル関数で機能する可能性のあるリードを1つ取得しましたが、それをコードに適用する方法を識別できませんでした。

function transformTypedCharacter(charStr) {
  return /[a-z]/.test(charStr) ? "S" : /[A-Z]/.test(charStr) ? "S" :   charStr;
}

function insertTextAtCursor(text) {
  var sel, range, textNode;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0).cloneRange();
      range.deleteContents();
      textNode = document.createTextNode(text);
      range.insertNode(textNode);

      // Move caret to the end of the newly inserted text node
      range.setStart(textNode, textNode.length);
      range.setEnd(textNode, textNode.length);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    range.pasteHTML(text);
  }
}


$("#editable").keypress(function(evt) {
  if (evt.which) {
    var charStr = String.fromCharCode(evt.which);
    var transformedChar = transformTypedCharacter(charStr);
    if (transformedChar != charStr) {
      insertTextAtCursor(transformedChar);
      return false;
    } 
  }
});
4

1 に答える 1

0

Use this instead:

var list = "Sing".split('');
function transformTypedCharacter(charStr) {
    return /[a-zA-Z]/.test(charStr) ? list.shift()||" " : charStr;
}

However I'm not sure whether this is really the best approach, as it might be possible that transformTypedCharacter is not called in a linear fashion respective to the expected output string. If you hit backspace, you might return some characters twice, and if you hit umlauts etc the would be inserted somewhere in your result.

于 2012-10-25T20:47:27.840 に答える