jQuery onscreen键盘不同的输入字段

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

每次打开键盘时都不要绑定新的事件处理程序。设置一个指向当前输入框的全局变量，并在单个事件处理程序中使用它。

此外，而不是检查内容以检测＆＃34;关闭＆＃34;按钮，给它一个不同的类，并使用一个单独的处理程序。

＆＃13;

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;