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鍵，移等（more info）。
  然而，輸入並獲得註冊的keypress，所以我把.append(的if (e.which!=13) {內，否則會笑臉每次按輸入及時補充，而沒有發生在<input/>，因爲它不支持多行。
• 我加入​​處理程序Backspace鍵和刪除：
  • 此處理程序檢查是否退格或刪除被壓，但還檢查該插入符號（光標）ISN分別在<input/>文本的開頭或結尾。
  • 否則當您按下退格鍵時，笑臉將被移除當光標處於開始位置時，沒有實際的字符會從<input/>中移除，從而產生不一致。 刪除在<input/>的末尾也是如此。
  • 那var pos =行處理選擇<input/>文本。我從this comment得到了@And390。雖然我不認爲它真的在這裏工作，但你可以在此基礎上看到我的答案的最後一段。
    如果您不瞭解?和:，則稱爲ternary operator，如果您想了解該鏈接，請閱讀該鏈接。

這是不是100％萬無一失，例如，如果您選擇多個字符並刪除它們，只有一個笑臉被刪除。粘貼多個字符也一樣。如果您選擇一個字符並在其位置插入完全相同的字符（因此文本實際上並未發生更改），則仍然會添加笑臉。
要修復這些類型的錯誤，您可以嘗試使用this post或其他有關插入位置和輸入選擇的其他方法。
您也可以嘗試使用.on('input',而不是'keypress'，這可能會爲您的需求提供更好的結果; 'input'看起來並沒有看到什麼鍵被按下，而是看着什麼被輸入到輸入字段。