Question

我需要的是什么：制作一个带有数字数字键盘“pin-pad”的HTML表单，就像计算器一样，每次点击所需的数字时，都会将数字添加到<input type=text>号。

详细信息：假设您可以输入例如电话号码，社会安全号码等，然后提交。

问题：当我点击<input id=1> onClick没有做我想要的时候，这个值似乎总是空的或类似的东西。

我尝试过：使用以下内容在onClick事件中尝试了html内联javascript代码但未成功：

<form action="" method="" name="vform">
<input type="text" value="" name="mvar" /><br />
<input type="button" class="fbutton" name="1" value="1" id="1" onClick=”document.vform.mvar.value+='1'” />
</form>

怎么做？

Answer 1

这是一个包含所有数字（0-9）

的演示Fiddle

HTML：

<form action="" method="" name="vform">
<input id=mvar type="text" value="" name="mvar" /><br />
<input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
</form>

使用jQuery的JavaScript：

function addNumber(element){
  $('#mvar').val($('#mvar').val()+element.value);
}

JavaScript原生：

function addNumber(element){
  document.getElementById('mvar').value = document.getElementById('mvar').value+element.value;
}

Answer 2

为此您可能需要使用第三方插件。

否则你需要自己编写整个代码。但是，您的代码不会在屏幕上显示数字键盘，因为在桌面上几乎所有用户都有自己的键盘，因此用户不需要虚拟键盘。浏览器也不会打扰显示键盘！

如果您想在屏幕上显示键盘并从那里输入数据，您需要编写代码，或在屏幕键盘上搜索数字javascript 。

Answer 3

您的代码基本上没有太大问题...除了周围报价的类型很重要.... 看起来你的onClick属性周围有'打开'和'关闭'类型的引号。如果你像其他代码一样简单地使它们变得简单。

<form action="" method="" name="vform">
<input type="text" value="" name="mvar" /><br />
<input type="button" class="fbutton" 
       name="1" value="1" id="1" 
       onClick="document.vform.mvar.value+='1'"/>
</form>

有效jsfiddle

制作屏幕数字键盘

3 个答案: