2

我有一个 id 为“可编辑”的可内容编辑的 div。我希望最终结果是用户键入，而不是物理键事件，而是出现预先确定的消息。

例如，如果预先确定的消息是单词“Sing”，那么无论用户首先输入什么字母，第一个出现的字母都是“S”，第二次按键时，会出现一个“i”，等等。

我在这个论坛上找到了模拟更改与关键事件关联的字符的代码，并且我修改了代码以实现示例中的“S”。我粘贴了下面的代码并在这里创建它：http: //jsfiddle.net/Ukkmu/61/

当然，这段代码给了我无限次的“S”。我被卡住的地方是只执行一次这个函数，然后为“i”调用另一个函数，然后是“n”等等。
我在一个我认为可能有效的切换功能上得到了一个可能的线索，但我无法辨别如何将它应用到我的代码中。

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

改用这个：

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

但是我不确定这是否真的是最好的方法，因为它可能transformTypedCharacter不是以与预期输出字符串相关的线性方式调用的。如果您按退格键，您可能会返回一些字符两次，如果您按元音变音等，则会将其插入结果中的某个位置。

于 2012-10-25T20:47:27.840 回答