javascript - Creation of mobile keypad for touchscreen using jquery

Question

I have created a number keypad using javascript. On each button click i have done the below:- Buttons are:-

<input type="button" value="2" class="num-key" onclick="insertvalue(this.value)">
<input type="button" value="3" class="num-key" onclick="insertvalue(this.value)">
<input type="button" value="4" class="num-key" onclick="insertvalue(this.value)">

the method is:-

function insertvalue(value)
{   
document.getElementById('number').value=document.getElementById('number').value + value;
}

It is working but it is to slow. If i will do this using jquery it might be fast. But i have done this using jquery

$( ".num-key" ).click(function() {
$(".num-text").val($(this).val());
});

But it is not working please tell me how to do this.

Answer 1

尝试这个

$( ".num-key" ).on('click',function() {
      $(".num-text").val(($('.num-text').val()) + (this.value));
});

演示

Answer 2

将您的代码更改为

$(".num-key").click(function() {
    var inc = $(".num-text").val();      
    $(".num-text").val($(this).val() + inc);
});

Answer 3

如果要将其用作键盘，则应保留文本输入的先前值：

$(".num-key").click(function() {
    $(".num-text").val($(".num-text").val() + $(this).val());
});

这是链接： 演示

Answer 4

试试这个完整的键盘演示：http: //jsfiddle.net/devmgs/XGuVZ/

$( ".num-key" ).click(function() {
    if($(this).val()=="D")
         $(".num-text").val($(".num-text").val().substring(0, $(".num-text").val().length - 1)); 
    else if($(this).val()=="C")
         $(".num-text").val("");
    else
          $(".num-text").val($(".num-text").val()+$(this).val());
});

Answer 5

一个非常简单的方法是使用：（jsFiddle）

$(".num-key").click(function () {
    var currentValue = $(".num-text").val();
    $(".num-text").val(currentValue + $(this).val());
});