jqueryまたはjavascriptを使用して、バックスペースのキーを押すか、モバイルデバイスで削除する方法を削除するには

Question

出力を表示しようとしていますが、パスワードを入力するとテキストまたは数字または文字ごとに画像が表示されます。私が削除しようとしたときに1つずつ削除するか、携帯電話のデスクトップの両方の文字を削除するためにバックスペース、ここで私が試した私のコードです。

私のコードでは、バックスペースを押すと、イメージを削除する代わりに、イメージを追加します。

$('#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）に対応する特定のキーコードをチェックするために使用されます。
私はそうスマイリーも Ctrlキー、 Altキー、 シフト、など（ more info）のように押したキーに挿入される、あなたの keyupから keypressを変更しました。
しかし、 はを入力し、それが複数行をサポートしていないので、何も <input/>に起こりませんが、を入力し keypressに登録され、私は if (e.which!=13) {内 .append(を置き、それ以外のスマイリーは、あなたが を押すたびに追加されます取得ん。
• Iは、バックスペースため​​ハンドラを追加しを削除：
  • このハンドラチェックBackspaceキー又はがを押すが、もキャレット（カーソル）ISNことを確認している削除した場合'tはそれぞれテキストの最初または最後に表示されます。
  • を押すと、スマイリーが削除されます。<input/>から実際の文字は削除されず、カーソルが先頭にあるときにはが削除され、不一致が発生します。 の場合は<input/>の末尾にあるを削除してください。
  • そのvar pos =行は、<input/>テキストの選択を処理します。私はthis commentから@And390によってそれを得た。私は本当にそれはここの仕事だとは思っていませんが、この上に構築することができます、私の答えの最後の段落を参照してください。
    ?と:を理解できない場合は、ternary operatorと呼ばれています。理解したい場合は、そのリンクをお読みください。あなたが複数の文字を選択し、それらを削除した場合

それは一つだけスマイリーが削除され、例えば、100％確実なではありません。複数の文字を貼り付ける場合も同じです。そして、あなたが1文字を選択し、その場所に正確に同じ文字を挿入すると（テキストは実際には変化しないので）、スマイリーが追加されます。
これらの種類のバグを修正するには、キャレットの位置と入力の選択についてthis postなどを試してみてください。
'keypress'の代わりに.on('input',を使用してみることもできます。 'input'は、どのキーが押されたかではなく、入力フィールドに実際に何が入力されたかを見ています。