关于网页键盘焦点的问题，按钮要从库里导出

Question

把你所有按钮都做成键盘热键 AccessKey

Answer 1

比如说下面的代码是我显示产品的，最后面有一个按钮，我每个页面显示6个产品，但是我希望可以用键盘来操作按钮的执行和翻页功能，我看了一些文章，都是静态的功能，有没有可以做成动态的？
下面是显示的代码
<table width="150" cellpadding=0 cellspacing=0 >
<tr> 
<td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                    <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                      <%if rs("bookpic")="" then 
response.write "<div align=center><a href=listinfo.asp?id="&rs("bookid")&" ><img src=images/emptybook.gif width=150 height=150 border=0></a></div>"
else%>
                      <a href=listinfo.asp?id=<%=rs("bookid")%> > <img src="<%=trim(rs("bookpic"))%>" width=150 height=150 border=0 align=absmiddle></a> 
                      <%end if%>
                    </TD>
                  </TR>
              </TABLE>
</td>
          </tr>
          <tr> 
            <td height="" align="center"><img src="images/ring01.gif" width="9" height="9"> 
              <%response.write "<a class=a4 href=listinfo.asp?id="&rs("bookid")&" ><font color=#FF6600>"
if len(trim(rs("bookname")))>12 then
response.write left(trim(rs("bookname")),10)&".."
else
response.write trim(rs("bookname"))
end if
response.write "</font></a>"
%>
              <font color="#999999"> 
              <%if len(trim(rs("bookcontent")))>25 then
response.write left(trim(rs("bookcontent")),25)&"..."
else
response.write trim(rs("bookcontent"))
end if%>
              </font> <br></td>
          </tr>
          <tr> 
            <td height="" align="center">规格：<%=rs("isbn")%><font color="#FF0000"><%=rs("bookchuban")%></font></td>
          </tr>
          <tr> 
            <td height="" align="center">价格：<font color="#FF0000"><strong><%=rs("huiyuanjia")%></strong></font><font color="#FF0000"><strong>元</strong></font></td>
          </tr>
          <tr> 
            <td height="" align="center"><a href="cart.asp?id=<%=rs("bookid")%>&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> 
            </td>
          </tr>
</table>下面是我修改的键盘超作的代码，但是怎么才能应用到上面去
<style>  
#chaborder td{  
 width:93px;height:43px;text-align:center  
}  
#chaborder a{  
  display:block; width:93px;height:43px;OVERFLOW: hidden; cursor:default;  
}  
#chaborder a:hover{width:89px;height:40px;border:1px solid #f00}  
#chaborder img{border:0}  
.ahover{width:89px;height:40px;border:1px solid #f00} 
.aout{display:block; width:93px;height:43px;OVERFLOW: hidden; cursor:default; } 
body {  
background-color: #ffffff;  
}  
</style>
<script type="text/javascript"> 
    function MoveCursor(obj){ 
        var row = parseInt(obj.id.substring(1,2)); 
        var col = parseInt(obj.id.substring(2,3)); 
        switch(event.keyCode){ 
            case 37: 
                if(col > 1) 
                    col--; 
                break; 
            case 38: 
                if(row > 1) 
                    row--; 
                break; 
            case 39: 
                if(col  < 3) 
                    col++; 
                break; 
            case 40: 
                if(row  < 3) 
                    row++; 
                break; 
case 65:
window.location="/shopping/test/gw.asp";
break;
        } 
        obj = document.getElementById("a" + row.toString() + col.toString()); 
        //obj.click(); 
        obj.focus(); 
        obj.className = "ahover"; 
        status = obj.innerText; 
    } 
</script>谢谢各位大大帮忙看下

Answer 2

动态页面生成的代码,就可以看做是静态页面...关于键盘控制.建议用 jQuery 的hotkeys 插件,很方便.

Answer 3

對於某一區域內容動態更新   不就是AJAX的應用的嗎？   用它讀取後台數據    前台寫入 應該能解決你的問題

Answer 4

但是我希望可以用键盘来操作按钮的执行和翻页功能 
------ 
看不明白..... 你意思是使用方向键控制表格中的单元格中连接的选择?设置连接的样式?? 别发有 <%%>的代码,发运行过后生成的html代码

Answer 5

根据你给的代码大致写了一个,注意你的table标签的结构不要变,一变代码就错误了发更改过的------加了个样式,更改了导航的一些html,给其中一个table加一个id
<script>
//使用键盘控制上下页翻滚，你给a加个id就可以，具体代码看我帮你改的导航........
var rowIndex=-1,colIndex=-1,MaxRow=2,MaxCell=3;
var LinkUrl="";
document.onkeydown=function(e)
{
  var TempRowIndex=rowIndex,TempColIndex=colIndex;//获取上次的下标
  e=e||event;
  switch(e.keyCode)
  {
    case 65://A
      var aNext=document.getElementById("aNext");//获取下一页的a标签
      if(aNext&&aNext.href) location=aNext.href;
      return;
    case 66://B
      var aPre=document.getElementById("aPre");//获取上一页的a标签
      if(aPre&&aPre.href)location=aPre.href;
      return;
    case 13://Enter
      if(LinkUrl!="")location=LinkUrl;
      return;//注意是return，停止执行下面的代码
    case 37://左
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(colIndex>=0) colIndex--;
        if(colIndex<0) colIndex=MaxCell-1;
      }
      break;
    case 38://上
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(rowIndex>=0)rowIndex--;
        if(rowIndex<0)rowIndex=MaxRow-1;
       }
      break; 
    case 39://右
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(colIndex<MaxCell) colIndex++;
        if(colIndex>=MaxCell) colIndex=0;
      }
      break; 
    case 40://下
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(rowIndex<MaxRow)rowIndex++;
        if(rowIndex>=MaxRow)rowIndex=0;
       }
      break;      
  }
  var FoucsTbs,PreFocusTbs,a;
  var tbList=document.getElementById("tbList");
  if(TempColIndex!=-1)
  {
    PreFocusTbs=tbList.rows[TempRowIndex].cells[TempColIndex].getElementsByTagName("table");//获取上次获取焦点的表格
    PreFocusTbs[1].style.backgroundColor='';
    //清除上次链接的样式
    a=PreFocusTbs[0].rows[1].cells[0].getElementsByTagName("a")[0];
    a.className="";
  }  
  FoucsTbs=tbList.rows[rowIndex].cells[colIndex].getElementsByTagName("table");//获取当前获取焦点的表格
  FoucsTbs[1].style.backgroundColor='#ff6600';
  //设置链接获取焦点
  a=FoucsTbs[0].rows[1].cells[0].getElementsByTagName("a")[0];
  a.className="bold";
  LinkUrl=a.href;//获取url，如果按下enter时更改location对象
}
</script>
<style>
a.bold{font-weight:bold;}
</style>
<table width="800" height="500" align="center" valign="top" cellpadding="0" cellspacing="0"> 
<tr> 
<td valign="top"> 
<!------给这个talbe加了个id------->
<table width="800" height=""  border="0" cellpadding="0" cellspacing="0" id="tbList"> 
<tr valign="top"> 
<td width="" height="" align="left" bgcolor="#FFFFFF" valign="top"> 
<div align="center"> 
<table width="150" cellpadding=0 cellspacing=0 > 
<tr>  
<!-----原来的代码--------><TR> 
<TD align=right> 
<p align=center> 
首页  
<a href="?page=2" id="aPre">上页</a>  
<a href="?page=3" id="aNext">下页  </a>
尾页  
 页次：1/1页 
 共有6种商品 
</TD> 
</TR> </form> 
</table> 
</td> 
</tr> 
</table>