输入框 - sanni

输入框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
tr{
background-color:#ddeeff;
}
</style>
<script type="text/javascript">
function show(me){
if(event.keyCode==38){//up
if(me.previousSibling!=null){
document.getElementById("tempID").value = me.previousSibling.childNodes[0].childNodes[0].value;
me.previousSibling.childNodes[0].childNodes[0].focus();
}
}
if(event.keyCode==40){//down
if(me.nextSibling!=null){
document.getElementById("tempID").value = me.nextSibling.childNodes[0].childNodes[0].value;
me.nextSibling.childNodes[0].childNodes[0].focus();
}
}
}
function go_to(val){
if(event.keyCode==13){
alert("跳转到id为" + val + "的页面");
}
}
function temp1(tt){
return function(){
show(tt);
}
}
function temp2(tt){
return function(){
go_to(tt);
}
}
function temp3(tt){
return function(){
tr_mouseover(tt);
}
}
function temp4(tt){
return function(){
tr_mouseout(tt);
}
}
function temp5(tt){
return function(){
txt_focus(tt);
}
}
function temp6(tt){
return function(){
txt_blur(tt);
}
}
function tr_mouseover(tt){
tt.style.backgroundColor = "#ffddee";
tt.childNodes[0].childNodes[0].focus();
}
function tr_mouseout(tt){
tt.style.backgroundColor='#ddeeff';
}
function txt_focus(tt){
tt.parentNode.parentNode.style.backgroundColor='#ffddee';
}
function txt_blur(tt){
tt.parentNode.parentNode.style.backgroundColor='#ddeeff';
}
function fin(){
var trs = document.getElementById("tab").childNodes[0].childNodes;
for(var i=0;i<trs.length;i++){
trs[i].onkeydown = temp1(trs[i]);
trs[i].onmouseover = temp3(trs[i]);
trs[i].onmouseout = temp4(trs[i]);
var txt = trs[i].childNodes[0].childNodes[0];
txt.onfocus = temp5(txt);
txt.onblur = temp6(txt);
txt.onkeydown = temp2(txt.value);
}
}
</script>
</head>
<body onload="fin();">
<input type="text" id="tempID"/>
<table cellpadding="5" id="tab">
<tr>
<td><input type="text" value="123"/></td>
</tr>
<tr>
<td><input type="text" value="234"/></td>
</tr>
<tr>
<td><input type="text" value="345"/></td>
</tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

posted on 2007-07-20 15:22 sanni 阅读(104) 评论(0) 编辑收藏引用

UI-links