javascript - 如何使用 jquery 或 javascript 按退格键删除图像或在移动设备中删除图像

Question

我正在尝试显示输出，当我键入任何密码时，每个文本、数字或任何字符都应该出现图像，但是当我按删除或退格键删除桌面中的字符时，它应该被一一删除在移动设备中，这是我尝试过的代码。

在我的代码中，如果我按退格键，它会添加更多图像而不是删除它。

$('#dSuggest').on("keyup", function() {
  var dInput = '<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42">';
  console.log(dInput);
  $('#output').append(dInput);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <input id="dSuggest" type="text" />
  <div id="output"></div>

Answer 1

试试这个，我还不确定如何让它在移动设备上运行，但它应该会让你更接近正常运行的代码:

$('#input').on('keydown',function(e) {
  var pos = this.selectionDirection=='backward' ? this.selectionStart : this.selectionEnd;
  if ((e.which==8 && pos!=0) || (e.which==46 && pos!=$(this).val().length)) { //BACKSPACE or DELETE
    $('#output img').last().remove();
  }
});
$('#input').on('keypress',function(e) {
  if (e.which!=13) { //ENTER
    $('#output').append('<img src="http://www.w3schools.com/tags/smiley.gif" alt="" width="15" height="15">');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="input" type="text" />
<div id="output"></div>

• e.which==8其他数字用于检查特定的键码，该键码对应于键盘上的键 ( list of keycodes )。
• 我改变了你的keyup至keypress ，否则也会在 Ctrl、Alt、Shift 等按键上插入笑脸 ( more info )。
  但是，Enter 确实在 keypress 上注册。 ，所以我放置了 .append(里面if (e.which!=13) { ，否则每次按 Enter 时都会添加一个笑脸，而 <input/> 中什么也没有发生。因为它不支持多行。
• 我添加了 keydown Backspace 和 Delete 的处理程序:
  • 此处理程序检查是否按下了 Backspace 或 Delete，但还检查插入符号(光标)分别不在 <input/> 的开头或结尾文本。
  • 否则，当光标位于开头时按 Backspace 时，将会删除笑脸，而不会从 <input/> 中删除任何实际字符。 ，造成不一致。 <input/> 末尾的 Delete 也是如此。 .
  • 那个var pos =行处理 <input/> 的选择文本。我从 this comment 得到的通过 @And390 。虽然我不认为它真的在这里起作用，但你可以在此基础上进行构建，请参阅我答案的最后一段。
    如果您不明白 ?和: ，它被称为 ternary operator ，如果您想了解它，请阅读该链接。

这并不是 100% 万无一失，例如，如果您选择多个字符并将其删除，则只会删除一个笑脸。粘贴多个字符也是如此。如果您选择一个字符并在其位置插入完全相同的字符(因此文本实际上不会改变)，仍然会添加一个笑脸。
要修复此类错误，您可以尝试使用 this post或其他有关插入符位置和输入选择的内容。
您还可以尝试使用.on('input',而不是'keypress' ，也许这可以为您的需求提供更好的结果； 'input'不太关注按下了什么键，而是关注实际输入到输入字段中的内容。