两个密码框，0-9数字button，怎样点击数字button，将数字填到密码框中

Question

[code=HTML
<input id="firstPass" type="password" />
<input id="secondPass" type="password" /><input id="num0" type="button" />
<input id="num1" type="button" />
<input id="num2" type="button" />
<input id="num3" type="button" />
<input id="num4" type="button" />
<input id="num5" type="button" />
<input id="num6" type="button" />
<input id="num7" type="button" />
<input id="num8" type="button" />
<input id="num9" type="button" />
[/code]首先我点击第一个密码框，然后点击数字按钮，则第一个密码框显示相应的数字（当然密码是看不出的）
然后点击第二个密码框，点击数字按钮，则第二个密码框显示相应的数字怎样通过JavaScript来写？

Answer 1

<input id="firstPass" type="password" onclick="setInputId(this.id)"/>
<input id="secondPass" type="password" onclick="setInputId(this.id)"/><input id="num0" type="button" onclick="setInpuValue(this.id)"/>
<input id="num1" type="button" onclick="setInpuValue(this.id)"/>
<input id="num2" type="button" onclick="setInpuValue(this.id)"/>
<input id="num3" type="button" onclick="setInpuValue(this.id)"/>
<input id="num4" type="button" onclick="setInpuValue(this.id)"/>
<input id="num5" type="button" onclick="setInpuValue(this.id)"/>
<input id="num6" type="button" onclick="setInpuValue(this.id)"/>
<input id="num7" type="button" onclick="setInpuValue(this.id)"/>
<input id="num8" type="button" onclick="setInpuValue(this.id)"/>
<input id="num9" type="button" onclick="setInpuValue(this.id)"/>var focusId=null;
function setInputId(id){
focusId=id;
}
function setInpuValue(id){
if(focusId==null){
alert('请选择一个输入控件!');
}else{
switch(id){
case 'num0':
document.getElementById(focusId).value = 0;
break;
case 'num1':
document.getElementById(focusId).value = 1;
break;
case 'num2':
document.getElementById(focusId).value = 2;
break;
case 'num3':
document.getElementById(focusId).value = 3;
break;
case 'num4':
document.getElementById(focusId).value = 4;
break;
case 'num5':
document.getElementById(focusId).value = 5;
break;
case 'num6':
document.getElementById(focusId).value = 6;
break;
case 'num7':
document.getElementById(focusId).value = 7;
break;
case 'num8':
document.getElementById(focusId).value = 8;
break;
case 'num9':
document.getElementById(focusId).value = 9;
break;
}
}
}

Answer 2

<script language="javascript">
var cur;window.onload=function(){
var fp = document.getElementById("firstPass");
var sp = document.getElementById("secondPass");
fp.onfocus = (function(obj){return function(){cur=obj;obj.value="";}})(fp);
sp.onfocus = (function(obj){return function(){cur=obj;obj.value="";}})(sp);
for(var i=0;i<=9;i++){
document.getElementById("num"+i).onclick=(function(n){
 return function(){
  cur.value += n;
  alert(cur.value)
 }
})(i);
}
cur = fp;
}
</script><form>
<input id="firstPass" type="password" />
<input id="secondPass" type="password" /><input id="num0" type="button" value="0"/>
<input id="num1" type="button" value="1" />
<input id="num2" type="button" value="2" />
<input id="num3" type="button" value="3" />
<input id="num4" type="button" value="4" />
<input id="num5" type="button" value="5" />
<input id="num6" type="button" value="6" />
<input id="num7" type="button" value="7" />
<input id="num8" type="button" value="8" />
<input id="num9" type="button" value="9" />
</form>

Answer 3

十分感谢您的回答。看了十分受用。
现在还有个问题想问您。
刚才是0-9，十个button，考虑到美观，我打算换成十个图片。<img src="image/num0.gif" id="num0">
<img src="image/num1.gif" id="num1">
<img src="image/num2.gif" id="num2">
<img src="image/num3.gif" id="num3">
<img src="image/num4.gif" id="num4">
......如果这种情况，该怎么办呢。因为img 没有value这个属性

Answer 4

<img src="image/num0.gif" id="num0" onclick=obj.value+=0>