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

Question

我尝试显示输出，当我键入任何密码图像时，应该为每个文本或数字或任何字符显示，但是当我按Delete或Backspace键同时删除桌面和移动设备中的字符时，应将其逐个删除，这是我尝试的代码。

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

 $('#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和其他数字用于检查某个键码，该键码对应于键盘上的键（键码列表 ）。
• 我将您的keyup更改为keypress ，否则在按Ctrl ， Alt ， Shift等键时也会插入一个笑脸（ 更多信息 ）。
  但是， Enter确实会在keypress注册，因此我将.append(放置在if (e.which!=13) { ，否则每次您按Enter都会添加一个笑脸，而<input/>什么也没有发生因为它不支持多行。
• 我为Backspace和Delete添加了一个keydown处理程序：
  • 此处理程序检查是否按下了Backspace或Delete ，但还检查了插入符号（光标）是否分别不在<input/>文本的开头或结尾。
  • 否则，当您在光标开始时按Backspace键时，笑脸将被删除，而<input/>并不会删除任何实际字符，从而导致不一致。 <input/>末尾的Delete也是如此。
  • 该var pos =行处理<input/>文本的选择。 我从@ And390的 评论中得到了它。 尽管我认为它确实不能在这里起作用，但是您可以在此基础上继续工作，请参见答案的最后一段。
    如果您不了解? 和: ，称为三元运算符 ，如果您想了解它，请阅读该链接。

这并不是100％的万无一失，例如，如果您选择多个字符并将其删除，则只会删除一个笑脸。 粘贴多个字符也是如此。 而且，如果您选择一个字符并在该位置插入完全相同的字符（因此文本实际上不会发生变化），那么仍然会添加一个笑脸。
要解决这些错误，您可以尝试使用本文或其他有关插入符号位置和输入选择的错误。
您也可以尝试使用.on('input',而不是'keypress' .on('input', 'keypress' ，可能会为您的需求提供更好的结果； 'input'并不太看按键的内容，而是实际输入的内容输入字段。