如何仅替换按下的字符；使用 Javascript/jQuery

Question

假设文本区域已经包含文本，例如：AA。我们如何检测按下的键并仅将 this 字符更改为其他内容。现在如果通过键盘按下 A 键，文本应该变为 AAB 已经存在的 A 个字符没有改变但是新压的 A key 应该写 B in textarea.

我的密码是

<textarea>aa</textarea>

<script>
    jQuery('textarea').keyup(function (e) {
        //THIS REPLACES ALL THE TEXT NOT JUST THE PRESSED CHARACTER
        //Need code that should replace just this pressed key not all text of textarea
        jQuery('textarea').val(jQuery('textarea').val().replace(/a/g, "b"));
    });
</script>

理想的解决方案是 select 按下的键 e 中的字符并替换它，但如果不可能，那么替换文本区域中的最后一个字符可能是一个糟糕的解决方法。

如果使用 keypress、keydown 或类似事件也可以。

Answer 1

试试这个：

因为 e.keyCode 是 read-only。我阻止它输入并添加了更改的字符。

感谢 MarkPiezak，部分代码来自此处：Set keyboard caret position in html textbox

$(function(){
  $("#ta").keydown(function(e){
    var newKey = e.keyCode + 1;
    var newChar = String.fromCharCode(newKey);
    $("#pressed-key").text(e.keyCode + "->" + newKey + "->" + newChar);
    if (e.keyCode > 47 && e.keyCode < 91) {
      e.preventDefault();
      var cursorPosition = $('textarea').prop("selectionStart");
      var ta = document.getElementById("ta");
      ta.value = [ta.value.slice(0, cursorPosition), newChar, ta.value.slice(cursorPosition)].join('');
      setCaretPosition("ta", cursorPosition+1);
    }
  });
  
  //This one is from 
  function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
  }
  
  
  $("#ta2").keydown(function(e){
    var sentence = "I am a monster!";
    if (e.keyCode > 47 && e.keyCode < 91) {
      e.preventDefault();
      var ta = document.getElementById("ta2");
      ta.value += sentence[ta.value.length] || "";
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="ta">aa</textarea>
<p id="pressed-key"></p>

<hr>
<p>This one is just for fun. Try answering this: Who are you?</p>
<textarea id="ta2"></textarea>

如何仅替换按下的字符；使用 Javascript/jQuery

How to replace the pressed character only; Using Javascript/jQuery

javascript

jquery

keyboard-events

jquery-events