页面里面加个小数字键盘？

我是个初学者，有个想法，能不能在页面某个文本框下面加个数字键盘？
比如<input type="textbox">下面有个table做的九宫格小数字键盘，然后用鼠标点table里的数字，textbox里面会自动显示出来。
这样的该怎么实现，用纯php应该不行吧?那用javascript怎么实现？我对javascript刚刚开始学。谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

将Button等元素换成你要的table就可以了，仅供参考：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> 动态添加节点 </TITLE>  <script language="javascript">

//添加按钮
function addnode(){
var btn = document.createElement("input");
btn.type = "button";
btn.id="butn";
btn.value = "按钮";
//var sw = document.getElementById("show");
document.show.appendChild(btn);
}

//添加单选按钮
function onlyselect(){
var btn2 = document.createElement("input");
btn2.type = "radio";
btn2.id="oy";
btn2.name="danxuan";
document.show.appendChild(btn2);
} //添加多选按钮
function moreselect(){
var btn3 = document.createElement("input");
btn3.type = "checkbox";
btn3.id="mr";
btn3.name="duoxuan";
document.show.appendChild(btn3);
btn3.checked=true;
} //动态添加表单元素
function addform(){ var txt1 = document.createTextNode("username");
var int1= document.createElement("input");
int1.type = "text";
int1.name = "name";
int1.value = "username"; var br1 = document.createElement("<br/>"); var txt2 = document.createTextNode("password");
var int2 = document.createElement("input");
int2.setAttribute("type","password");
int2.setAttribute("name","psw");
int2.setAttribute("value","password");

var br2 = document.createElement("<br/>"); var int3= document.createElement("input");
int3.type = "button";
int3.value = "提交";
int3.attachEvent("onclick",submit); var int4= document.createElement("input");
int4.type = "button";
int4.value = "重置";
int4.attachEvent("onclick",reset); var br3 = document.createElement("<br/>"); var oFragment = document.createDocumentFragment();
oFragment.appendChild(txt1);
oFragment.appendChild(int1);
oFragment.appendChild(br1); oFragment.appendChild(txt2);
oFragment.appendChild(int2);
oFragment.appendChild(br2); oFragment.appendChild(int3);
oFragment.appendChild(int4);
oFragment.appendChild(br3); document.show.appendChild(oFragment); }
function submit(){
document.all.show.action = "time.html";
}
function reset(){
document.all.show.username = "";
document.all.show.psw = "";
}

//注册事件
function reginEvent(){
var btn1 = document.getElementById("butn");
var btn2 = document.getElementById("oy");
var btn3 = document.getElementById("mr"); var num = new Array(btn1,btn2,btn3);
for(var n=0; n<num.length; n++){
if (num[n])
{
num[n].attachEvent('onclick',test);
}else if (num[n] == undefined )
{
break;
}else{
return;
} //end if
} //end for }
function test(){
alert("注册事件中……");
} //删除按钮
function deletenode(){
var btn1 = document.getElementById("butn");
var btn2 = document.getElementById("oy");
var btn3 = document.getElementById("mr"); var num = new Array(btn1,btn2,btn3);
for(var n=0; n<num.length; n++){
//alert(typeof(num[n]));
if (num[n] || ((num[0] == undefined) || (num[1] && num[2])) || ((num[1] == undefined) || (num[0] && num[2])) || ((num[2] == undefined) || (num[1] && num[0])))
{
document.show.removeChild(num[n]);
}else if (num[n] == undefined)
{
break;
}else{
return;
} //end if
} //end for }  </script>
</HEAD> <BODY>

<input type="button" id="deletend" onclick="deletenode()" value="删除按钮" /> 
<input type="button" id="regin" onclick="reginEvent()" value="注册事件" />
<br/><br/>
<input type="button" id="addnd" onclick="addnode()" value="普通按钮" /> 
<input type="button" id="only" onclick="onlyselect()" value="单选按钮" /> 
<input type="button" id="more" onclick="moreselect()" value="多选按钮" /> 
<button onclick="addform()" >动态添加表单元素</button>
<br/><br/>
<form name="show" style="background-color:#cccccc; width:280px; height:100px;"></form>
</BODY>
</HTML>
运行环境：IE
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .tdstyle
    {
        background-color:#f0f8ff;
        width:30px;
        height:30px;
        vertical-align:middle;
        text-align:center;
        line-height:30px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="text" id="txtshow" style="width:101px; margin-left:46%"  />
    <table align="center">
        <tr>
            <td class="tdstyle" id="td0"></td>
            <td class="tdstyle" id="td1"></td>
            <td class="tdstyle" id="td2"></td>
        </tr>
        <tr>
            <td class="tdstyle" id="td3"></td>
            <td class="tdstyle" id="td4"></td>
            <td class="tdstyle" id="td5"></td>
        </tr>
        <tr>
            <td class="tdstyle" id="td6"></td>
            <td class="tdstyle" id="td7"></td>
            <td class="tdstyle" id="td8"></td>
        </tr>
    </table>
    </div>
    </form>
</body>
<script type="text/javascript">
    var flg = 9;
    for (var i = 0; i < flg; i++) {
        var spancount = document.createElement("span");
        spancount.innerHTML = i;
        spancount.style.display = "block";
        spancount.style.background = "#f0f8ff";
        spancount.style.width = "30px";
        spancount.style.height = "30px";
        spancount.style.textalign = "center";
        spancount.style.lineheight = "30px";
        spancount.onclick = function (e) {
            document.getElementById("txtshow").value = this.innerHTML;
        }
        document.getElementById("td" + i).appendChild(spancount);
    }
    </script>
</html>我也是新手！刚学起没几天！多做还是好的！顺便自己学习学习
<input type="textbox">
textbox是什么
<!DOCTYPE html>
<head>
<style type="text/css">
#panel{
width: 315px;
height: 315px;
position: relative;

border: 1px solid #ccc;
}
.btn {
width: 103px;
height: 103px;
float: left;
cursor: pointer;
font-size: 20px;
vertical-align:middle;
text-align: center;
border: 1px solid #ddd;
background-color: #abcdef;
}
</style>
</head>
<body>
<input type="text" id="show"/>
<div id="panel"></div>
</body>
<script type="text/javascript">
var s = {
$: function(arg) {
return document.getElementById(arg)
? document.getElementById(arg)
: document.getElementsByTagName(arg);
},
div: function(clz) {
var d = document.createElement('div');
d.className = clz;
return d;
},
handler: function(el,type,fn) {
if(el.attachEvent)
el.attachEvent('on' + type,fn);
else
el.addEventListener(type,fn,false);
}
}
var p = s.$('panel');
s.handler(p,'click',function(e) {
s.$('show').value = e.target ? e.target.innerHTML : e.srcElement.innerHTML;
});
var d;
for(var i=1;i<10;i++){
d = s.div('btn');
d.innerHTML = i;
p.appendChild(d);
}
</script>
</html>