在javascript中实现移动触摸键盘

Question

我想在java脚本或jquery中实现移动键盘。我实现键盘的基本结构但是我不清楚javascript。

＆＃13;

＆＃13;

$("#phone").find("button").mouseup(function(event){
  var button_pressed = $(event.currentTarget).data("value")
  $("#result").val(t9($("#result").val(),button_pressed))
})

function t9(text,button_pressed){
  // Write your code here
  return text
}

＆＃13;

#phone button {
  height: 50px;
  width: 75px;
}

#phone button span {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}

#result {
  width: 225px;
  height: 25px;
  margin-left:2px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="phone">
  <tr>
    <td colspan="3">
      <input type="text" id="result" />
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="1" class="key">1
        <span>. , !</span>
      </button>
    </td>
    <td>
      <button data-value="2" class="key">2
        <span>a b c</span>
      </button>
    </td>
    <td>
      <button data-value="3" class="key">3
        <span>d e f</span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="4" class="key">4
        <span>g h i</span>
      </button>
    </td>
    <td>
      <button data-value="5" class="key">5
        <span>j k l</span>
      </button>
    </td>
    <td>
      <button data-value="6" class="key">6
        <span>m n o</span>
      </button>
    </td>
  </tr>
  <tr>
    <td><button data-value="7" class="key">7
      <span>p q r s</span>
      </button>
    </td>
    <td>
      <button data-value="8" class="key">8
        <span>t u v</span>
      </button>
    </td>
    <td>
      <button data-value="9" class="key">9
        <span>w x y z</span>
      </button>
    </td>
  </tr>
  <tr>
    <td><button data-value="*" class="key">*</button></td>
    <td><button data-value="0" class="key">0</button></td>
    <td><button data-value="#" class="key">#</button></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 替换data('value')宽度attr('data-value')。
2. 在button_pressed函数中返回text而不是t9。
3. 可选 - 您可以将$(event.currentTarget)替换为$(this)
＆＃13;
＆＃13;
var to = 1000, timeout, counter = 0, lastKey, keyPressTimeout, keyPressTO = 1000;

$("#phone button").bind("mousedown", function() {
  var $this = $(this),
      $result = $('#result'),
      val = $result.val(),
      button_pressed = $this.attr("data-value");

  keyPressTimeout = setTimeout(function() {
    // if the click is long add the value of the button to the textxbox
    val += button_pressed;
    $result.val(val);
    keyPressTimeout = null;
  }, keyPressTO);
  
}).bind("mouseup", function(event) {
  clearTimeout(keyPressTimeout);
  
  if (!keyPressTimeout) {
    return false;
  }
  var $this = $(this),
      $result = $('#result'),
      val = $result.val(),
      button_pressed = $this.attr("data-value");

  // if the user clicks on a new key reset all
  if (lastKey !== button_pressed) {
    reset();  
  }

  // if the user click fast on the same key, remove the last charchter to replace it with the new
  if (counter !== 0 && lastKey === button_pressed) {
    val = val.substring(0, val.length - 1);
  }

  val += t9(button_pressed);
  $result.val(val);

  // restart the timeout
  clearTimeout(timeout);
  counter++;

  // save the last key pressed so we can compare it in the next click
  lastKey = button_pressed;

  // if the user not clicked on anything within the timeout delay (to variable) reset all.
  timeout = setTimeout(reset, to);
});

function t9(button_pressed) {
  return keys[button_pressed][counter % keys[button_pressed].length];
}

function reset() {
  counter = 0;
  lastKey = null;
}

var keys = {
  '1': ['.', ',', '!'],
  '2': ['a', 'b', 'c']
};
＆＃13;
#phone button {
  height: 50px;
  width: 75px;
}
#phone button span  {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}
#result{
  width: 225px;
  height: 25px;
  margin-left:2px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="phone">
  <tr>
    <td colspan="3">
      <input type="text" id="result" />
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="1" class="key">1
        <span>. , !</span>
      </button>
    </td>
    <td>
      <button data-value="2" class="key">2
        <span>a b c</span>
      </button>
    </td>
    <td>
      <button data-value="3" class="key">3
        <span>d e f</span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="4" class="key">4
        <span>g h i</span>
      </button>
    </td>
    <td>
      <button data-value="5" class="key">5
        <span>j k l</span>
      </button>
    </td>
    <td>
      <button data-value="6" class="key">6
        <span>m n o</span>
      </button>
    </td>
  </tr>
  <tr>
    <td><button data-value="7" class="key">7
      <span>p q r s</span>
      </button>
    </td>
    <td>
      <button data-value="8" class="key">8
        <span>t u v</span>
      </button>
    </td>
    <td>
      <button data-value="9" class="key">9
        <span>w x y z</span>
      </button>
    </td>
  </tr>
  <tr>
    <td><button data-value="*" class="key">*</button></td>
    <td><button data-value="0" class="key">0</button></td>
    <td><button data-value="#" class="key">#</button></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

http://output.jsbin.com/seqexi

Answer 2

• 使用中的现有值连接单击的按钮值 #result输入
版本1.4中添加了
• jQuery.data( element )，因此请使用更新版本。
• 使用$(this)选择点击的元素而不是event.currentTarget，以使其更具可读性（取决于开发者的偏好）

$("#phone").find("button").mouseup(function(event) {
  var button_pressed = $(this).data("value");
  $("#result").val(t9($("#result").val(), button_pressed))
})

function t9(text, button_pressed) {
  return text + button_pressed;
}

#phone button {
  height: 50px;
  width: 75px;
}
#phone button span {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}
#result {
  width: 225px;
  height: 25px;
  margin-left: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="phone">
  <tr>
    <td colspan="3">
      <input type="text" id="result" />
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="1" class="key">1
        <span>. , !</span>
      </button>
    </td>
    <td>
      <button data-value="2" class="key">2
        <span>a b c</span>
      </button>
    </td>
    <td>
      <button data-value="3" class="key">3
        <span>d e f</span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="4" class="key">4
        <span>g h i</span>
      </button>
    </td>
    <td>
      <button data-value="5" class="key">5
        <span>j k l</span>
      </button>
    </td>
    <td>
      <button data-value="6" class="key">6
        <span>m n o</span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="7" class="key">7
        <span>p q r s</span>
      </button>
    </td>
    <td>
      <button data-value="8" class="key">8
        <span>t u v</span>
      </button>
    </td>
    <td>
      <button data-value="9" class="key">9
        <span>w x y z</span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button data-value="*" class="key">*</button>
    </td>
    <td>
      <button data-value="0" class="key">0</button>
    </td>
    <td>
      <button data-value="#" class="key">#</button>
    </td>
  </tr>
</table>