jQuery Onscreen Tastatur verschiedene Eingabefelder

Question

Ich möchte eine Bildschirmtastatur mit jquery für bestimmte Benutzereingaben erstellen. Es funktioniert gut für ein Textfeld, aber wenn ich versuche, diesen Code für mehr als eine Eingabe zu verwenden, füllt es die Werte weiter in der ersten Eingabe. Mein Skript erkennt die zweite ID, aber wie ich sagte, es füllt die Werte weiter in der ersten Eingabe. Was ist das Problem?

<input type="text" name="first" id="first" placeholder="0:00"onClick="showKeyboard(this)"/> 

function showKeyboard(inputbox){ 
    $('#keyboard').show(); 
    inputbox.value = ""; 
    alert(inputbox.id); 

    $('#keyboard .char').click(function() { 
     var charklicked = $(this).html(); 
     if(charklicked === "close"){ 
      $('#keyboard').hide(); 
      return false; 
     }else{ 
      inputbox.value = inputbox.value + charklicked; 
      return showKeyboard(); 
     } 
    }); 

    return false; 
} 

JSFiddle Demo

Answer 1

Sie einen neuen Event-Handler jedes Mal, wenn die Tastatur nicht binden öffnen. Legen Sie eine globale Variable fest, die auf das aktuelle Eingabefeld verweist, und verwenden Sie diese in einem einzelnen Ereignishandler.

Anstatt den Inhalt zu überprüfen, um den "Schließen" -Button zu erkennen, geben Sie ihm eine andere Klasse und verwenden Sie einen separaten Handler dafür.

var curInputBox = null; 
 

 
function showKeyboard(inputbox) { 
 
    $('#keyboard').show(); 
 
    inputbox.value = ""; 
 
    alert(inputbox.id); 
 
    curInputBox = inputbox; 
 
    return false; 
 
} 
 

 
$('#keyboard .char').click(function() { 
 
    if (!curInputBox) { 
 
    return; 
 
    } 
 
    var charklicked = $(this).html(); 
 
    curInputBox.value += charklicked; 
 
}); 
 

 
$('#keyboard .close').click(function() { 
 
    $('#keyboard').hide(); 
 
});

#keyboard { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: none; 
 
} 
 

 
#keyboard li { 
 
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; 
 
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; 
 
    box-shadow: inset 0px 1px 0px 0px #ffffff; 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6)); 
 
    background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); 
 
    background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); 
 
    background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); 
 
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); 
 
    background-color: #ffffff; 
 
    -moz-border-radius: 6px; 
 
    -webkit-border-radius: 6px; 
 
    border-radius: 6px; 
 
    border: 1px solid #dcdcdc; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    color: #666666; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    padding: 6px 24px; 
 
    text-decoration: none; 
 
    text-shadow: 0px 1px 0px #ffffff; 
 
} 
 

 
#keyboard li:hover { 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff)); 
 
    background: -moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); 
 
    background: -webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); 
 
    background: -o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); 
 
    background: -ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); 
 
    background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff', GradientType=0); 
 
    background-color: #f6f6f6; 
 
} 
 

 
#keyboard li:active { 
 
    position: relative; 
 
    top: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <legend>First</legend> 
 
    <input type="text" name="first" id="first" placeholder="0:00" onClick="showKeyboard(this)" /> 
 
    <legend>Second</legend> 
 
    <input type="text" name="second" id="second" placeholder="0:00" onClick="showKeyboard(this)" /> 
 

 
    </fieldset> 
 
</form> 
 

 
<ul id="keyboard"> 
 

 
    <li class="char">1</li> 
 
    <li class="char">2</li> 
 
    <li class="char">3</li> 
 

 
    <li class="char">4</li> 
 
    <li class="char">5</li> 
 
    <li class="char">6</li> 
 

 
    <li class="char">7</li> 
 
    <li class="char">8</li> 
 
    <li class="char">9</li> 
 

 
    <li class="char">-</li> 
 
    <li class="char">0</li> 
 
    <li class="char">:</li> 
 
    <li class="close">close</li> 
 
</ul>