[英]How to delete an image on key press of backspace or delete in mobile device using jquery or javascript
I am trying to display an output, when I type any password image should appear for each text or number or any character, but it should be removed one by one when I press delete or backspace to delete the characters both in desktop also in mobile device, Here is my code which I tried. 我尝试显示输出,当我键入任何密码图像时,应该为每个文本或数字或任何字符显示,但是当我按Delete或Backspace键同时删除桌面和移动设备中的字符时,应将其逐个删除,这是我尝试的代码。
In my code if i press backspace it adds more image instead of remove it. 在我的代码中,如果我按退格键,它将添加更多图像而不是将其删除。
$('#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>
Try this, I'm not sure how to get it working on mobile yet, but it should bring you a whole lot closer to functioning code: 尝试一下,我不确定如何在移动设备上运行它,但是它应该使您更接近功能代码:
$('#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
and the other numbers are used to check for a certain keycode, which corresponds to a key on your keyboard ( list of keycodes ). e.which==8
和其他数字用于检查某个键码,该键码对应于键盘上的键(键码列表 )。 keyup
to keypress
, otherwise a smiley would also be inserted on pressing keys like Ctrl , Alt , Shift , etc ( more info ). keyup
更改为keypress
,否则在按Ctrl , Alt , Shift等键时也会插入一个笑脸( 更多信息 )。 keypress
, so I placed the .append(
inside the if (e.which!=13) {
, otherwise a smiley would be added every time you press Enter , while nothing happens in the <input/>
since it doesn't support multiple lines. keypress
注册,因此我将.append(
放置在if (e.which!=13) {
,否则每次您按Enter都会添加一个笑脸,而<input/>
什么也没有发生因为它不支持多行。 keydown
handler for Backspace and Delete : keydown
处理程序:
<input/>
text. <input/>
文本的开头或结尾。 <input/>
, creating inconsistencies. <input/>
并不会删除任何实际字符,从而导致不一致。 Same goes for Delete at the end of the <input/>
. <input/>
末尾的Delete也是如此。 var pos =
line handles selection of the <input/>
text. var pos =
行处理<input/>
文本的选择。 I got it from this comment by @And390 . ?
?
and :
, it's called a ternary operator , read that link if you want to understand it. :
,称为三元运算符 ,如果您想了解它,请阅读该链接。 It isn't 100% foolproof, for instance if you select multiple characters and delete them, only one smiley is removed. 这并不是100%的万无一失,例如,如果您选择多个字符并将其删除,则只会删除一个笑脸。 Same goes for pasting multiple characters.
粘贴多个字符也是如此。 And if you select one character and insert the exact same character in it's place (so the text doesn't actually change), there will still be a smiley added.
而且,如果您选择一个字符并在该位置插入完全相同的字符(因此文本实际上不会发生变化),那么仍然会添加一个笑脸。
To fix those kinds of bugs, you could try using this post or others concerning caret position and input selection. 要解决这些错误,您可以尝试使用本文或其他有关插入符号位置和输入选择的错误。
You can also try using .on('input',
instead of 'keypress'
, maybe that gives better results for your needs; 'input'
doesn't look so much at what keys are pressed, but instead at what actually is entered into the input-field. 您也可以尝试使用
.on('input',
而不是'keypress'
.on('input',
'keypress'
,可能会为您的需求提供更好的结果; 'input'
并不太看按键的内容,而是实际输入的内容输入字段。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.