如何通过弹出式键盘在表单字段中填写数字(使用Javascript/AJAX)

问题描述：

我有一个小项目，其中我需要开发一个包含所有数字+退格键+小数(均作为按钮)的小键盘.单击这些数字时，应填充一个表单字段(例如文本框).此小键盘应作为链接位于表单字段旁边.

I have a small project, wherein I need to develop a keypad with all the digits+backspace+decimal (all as buttons). These digits when clicked should populate a form field (say a text box). This keypad should be located next to the form field as a link.

键盘最好是Javascript/AJAX.此外，键盘例程还应具有关闭按钮，以最大程度地减少弹出键盘. (这与我们在售票网站上看到的日历控件非常相似.)

The keypad should be preferably Javascript/AJAX. Also the keypad routine should have a close button in order to minimize the popup keypad. (It's very much similar to a calendar control which we see in ticketing websites.)

要舍入键盘例程，只会在单击数字(按钮)时填充表单字段.

To round up the keypad routine does nothing fancy but to just populate the form field, when the digits (buttons) are clicked.

我需要有关编码键盘例程的帮助.如何设计javascript?如何包括按钮(用于文件中的数字+小数+退格键)?如何对单击按钮时会在表单字段中显示该值的部分进行编码?

I need help with coding the keyboard routine. How do I design the javascript? How to include the buttons (for the digits+decimal+backspace in the file)? How to code the part where when the buttons are clicked, then that value is showed in the form field?

非常感谢您的帮助.

谢谢

答

问题出在哪里?

无需使用ajax.非常快速又肮脏的示例:

No need to use ajax. Very quick and dirty example:

在此处进行测试-> http://www.codebase .es/so/numpad.html

<html>
<head><title></title></head>
<body>

<script> function $(id) { return document.getElementById(id); } </script>

<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>

<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="&larr;" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>

</body>
</html>

请勿使用原样" ...使用CSS样式表，函数等.

Do not use "as is"... use css stylesheets, functions, etc.

如何通过弹出式键盘在表单字段中填写数字(使用Javascript/AJAX)

相关推荐