jQuery屏幕鍵盤不同的輸入字段

Question

我想創建一個屏幕鍵盤與jQuery的特定用戶輸入。 它適用於一個文本框，但是當我嘗試將此代碼用於多個輸入時，它會在第一個輸入中填充更多的值。 我的腳本識別第二個ID，但是我怎麼說呢，它在第一個輸入中填充了更多的值。有什麼問題？

<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

每次打開鍵盤時不綁定一個新的事件處理程序。設置一個指向當前輸入框的全局變量，並將其用於單個事件處理程序中。

此外，而不是檢查內容來檢測「關閉」按鈕，給它一個不同的類，並使用一個單獨的處理程序。

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>