javascript - 制作屏幕数字键盘

Question

我需要什么:制作一个 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

这是一个演示 Fiddle包含所有数字(0-9)

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