请教高手，请问有没有既可编辑其中数字又可以按上下箭头增减数字的东西，或者如何实现？

Question

<script>
var  timer=null;
function check(uid)
{
var obj=document.all(uid);
if(isNaN(obj.value))obj.value=obj.value.slice(0,-1)
timer=setTimeout("check('"+uid+"')",10);
}
function myclear(){
clearTimeout(timer)
}
function set(i)
{
if(i==1)
document.all.mytext.value++;
else
document.all.mytext.value--;
}
</script>
<form name=form1>
<input name=mytext onfocus=check(this.uniqueID) onblur=myclear()>
<input type=button value="+" onclick=set(1)>
<input type=button value="-" onclick=set(0)>
输入过程中即时检查文本框
</form>

Answer 1

<style>
.navPoint {
font-size:10px;
cursor:hand;
height:10px;
width:20px;
}
</style><table CELLPADDING='0' CELLSPACING='0'>
<tr>
<td rowspan=2><input type=text value=0 id="spinner"></td>
<td><input type=button class="navPoint" value="+" onClick="spinner.value++"></td>
</tr>
<tr><td><input type=button class="navPoint" value="-" onClick="spinner.value--"></td>
</tr>
</table>

Answer 2

我刚好在做这个，不过还不完善
使用示例：
var ns=numberSelector( function(num,unit){status=num+unit;}, "数字:", 100,0,1,{"px","cm","dd"},0);
　　
function numberSelector(onNumberChange,text,defaultNum,max,min,tick,units,defaultUnit){
onNumberChange(defaultNum,units?units[defaultUnit]:null);
var sp=newElement("span",null,null,null," VERTICAL-ALIGN: super;overflow-x:visible;margin:0;padding:0;height:20;border:fuchsia thin groove;cursor:default");
sp.innerHTML=text;
var num_text=newElement("input",null,sp,null,"TEXT-ALIGN:right;margin:0;padding:0;");
var cssUD="padding:0;border:#0000ff 2px outset;right;height:100%;width:10;font-weight:900;font-size:16px;color: #0000ff;cursor:hand"
var down=newElement("span",null,sp,null,cssUD);
var up=newElement("span",null,sp,null,cssUD);
num_text.size=4;
num_text.value=defaultNum;
num_text.ns=sp;
num_text.onkeydown=function(){ NS=event.srcElement.ns; return ( (event.keyCode>47&&event.keyCode<58)||event.keyCode==8);}
num_text.onkeyup=function(){NS.onNumChange(NS.number,NS.unit)}
up.onmousedown=function(){
src=event.srcElement;
NS=src.ns;
var onup=function(){if(NS.number+NS.tick<=NS.max)NS.number+=NS.tick;NS.num_text.value=NS.number;NS.onNumChange(NS.number,NS.unit)};
NS.iID=setInterval(onup,100);
onup();
src.setCapture();
}
up.onmouseup=function(){clearInterval(NS.iID);document.releaseCapture();}
down.onmousedown=function(){
src=event.srcElement;
NS=src.ns;
var ondown=function(){if(NS.number-NS.tick>=NS.min)NS.number-=NS.tick;NS.num_text.value=NS.number;NS.onNumChange(NS.number,NS.unit)};
NS.iID=setInterval(ondown,100);
ondown();
src.setCapture();
}
down.onmouseup=function(){clearInterval(NS.iID);document.releaseCapture();}
up.ns=sp;
down.ns=sp;

down.innerText="<";
up.innerText=">";
sp.tick=tick;
sp.num_text=num_text;
sp.number=defaultNum;
sp.max=max;
sp.min=min;
sp.onNumChange=onNumberChange;
sp.unit=units?units[defaultUnit]:null;
if(units){
var u=newElement("select",null,sp);
u.height=40;
u.ns=sp;
for(var x=0;x<units.length;x++){var op=new Option(units[x]);if(x==defaultUnit)op.checked=true;u.options.add(op);}
u.onchange=function(){NS=event.srcElement.ns;NS.unit=event.srcElement.value;};
}
NS=sp;
return sp;
}
function newElement(eTag,eID,eParent,className,cssText){
var ne=document.createElement(eTag);
if(eParent)eParent.appendChild(ne);
if(eID)ne.id=eID;
if(className)ne.className=className;
if(cssText)ne.style.cssText=cssText;
return ne;
}

Answer 3

修改了一下
<style>
.navPoint {
font-family: Webdings;
font-size:7px;
cursor:hand;
height:10px;
width:20px;
background-color:#C0C0C0;
border:1 outset #ffffff;
}
</style><table CELLPADDING='0' CELLSPACING='0'>
<tr>
<td rowspan=2><input type=text value=0 id="spinner"></td>
<td><input type=button class="navPoint" value="5" onClick="spinner.value++"></td>
</tr>
<tr><td><input type=button class="navPoint" value="6" onClick="spinner.value--"></td>
</tr>
</table>