创建自己的带有输入的numpad

Question

我一直在网上搜索一些关于如何制作自己的numpad的技巧，它是用html代码创建的，可以在电脑上像numpad一样工作。

我在我的网站上有这个numpad，它可以在同一个div中输入一个文本字段。我已经为每个按钮赋予了一个值，现在我想我必须创建更多的值，这样数字才能添加到我的文本字段中。

我真的是一个编程的初学者，所以这可能真的很容易。谢谢你的帮助！

Answer 1

您也可以使用jQuery来完成此操作。如果你需要一个简单易用的解决方案(jQuery通常更容易更快)，那么jQuery是更好的选择。

HTML：

<div id="myDiv"> </div> //the div to which we add text

<div id="buttonContainer">           //this is the div containing the numbers (the numpad)
<button value="one"> one </button>
<button value="two"> two </button> 
</div>

jQuery：

$("#buttonContainer button").click(function() {
   $("#myDiv").append($(this).val());
});

http://jsfiddle.net/DLzUU/1/

它的作用是:当您单击div中id为'buttonContainer‘的任何按钮时，它会将其值添加到id为"myDiv“的div中。

关于Javascript主题，如果您需要一个非常好的指南：http://javascript.info/

Answer 2

你需要的是学习javascript。使用javascript，您将能够编写代码来实现这一点。

<script>

   function AddValueToTextField(val)
   {
      document.getElementByID( <textfiled ID> ).value += val;
   }

</script>

<button onClick="AddValueToTextField(this.value)"></button>

这只是一个非常基本的概念，但它只是一个粗略的概念，按钮被设置为在单击时调用函数"AddValueToTextField“。当函数被调用时，按钮的值将随其一起发送。在函数内部，它获得文本字段上的句柄，并将按钮的值添加到已有的值上，我建议您查看以下内容：

http://www.w3schools.com/js/

作为学习javascript的起点。

Answer 3

你可以试试http://keith-wood.name/keypad.htmlkeypad example，这是一个很棒的例子