Question

我想用b代替a，但是我总是在b之前看到a。我尝试了其他事件，例如keyup，keydown，event.preventDefault，但它们都不起作用。用户输入时，如何防止出现这种“ a”视图？

$("#text").keypress(function(event) {
  text2 = $(this).val();
  text2 = text2.replace(/(a)/g, "b");
  $("#text").val(text2);
});

//i tried with keyup, keydown also...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>

Answer 1

使用event.preventDefault：

$("#text").keypress(function(event) {
  if (event.key === "a") {
    event.preventDefault(); // <================
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>

那只是阻止了a的出现。如果要在用户键入b时插入a而不是a，则需要the techniques in this question's answers。只需调用.val(..)就会弄乱用户的光标位置（在使用val更新值时尝试在现有文本前面键入以查看问题）。

使用Tim Down's answer解决该问题的示例：

$("#text").keypress(function(event) {
  if (event.key === "a") {
    event.preventDefault();
    insertTextAtCursor(this, "b");
  }
});
function insertTextAtCursor(el, text) {
    var val = el.value, endIndex, range;
    if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + text.length;
    } else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
        el.focus();
        range = document.selection.createRange();
        range.collapse(false);
        range.text = text;
        range.select();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>

用户键入时防止按键默认值

1 个答案: