紧急求救，如何用js实现类似9宫格输入法

也就是如果页面有一个编辑框，如果只通过0~9十个数字键，可以输入包括26个字母（不考虑大小写）+0~9在内的36个字符，比如数字'1'键，快速按一下输入'1'，按2下输入'A'，按3下输入'B'，按4下输入'C'，按5下又回到'1'。
如何实现如上功能，大神求救。

解决方案 »

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

LZ看下这个是不是你要的效果
<style type="text/css">
td{
  width :50px;
  height:50px;
  text-align: center;
  cursor: pointer;
}
#preview , #result{
  width :200px;
  height :100px;
  border: 1px solid;
}
</style>
Preview
<div id="preview"></div>
Result
<div id="result"></div>
<table border="1">
  <tr>
      <td onclick="fn(1)">1</td>
      <td onclick="fn(2)">2,A,B,C</td>
      <td onclick="fn(3)">3,D,E,F</td>
  </tr>
  <tr>
      <td onclick="fn(4)">4,G,H,I</td>
      <td onclick="fn(5)">5,J,K,L</td>
      <td onclick="fn(6)">6,M,N,O</td>
  </tr>
  <tr>
      <td onclick="fn(7)">7,P,Q,R,S</td>
      <td onclick="fn(8)">8,T,U,V</td>
      <td onclick="fn(9)">9,W,X,Y,Z</td>
  </tr>
</table>
<script type="text/javascript">
var data = [
              [],
              [1],
              [2,'A','B','C'],
              [3,'D','E','F'],
              [4,'G','H','I'],
              [5,'J','K','L'],
              [6,'M','N','O'],
              [7,'P','Q','R','S'],
              [8,'T','U','V'],
              [9,'W','X','Y','Z']
          ];
var click_info = {} , prevIndex = -1 , isFirst = true;
function fn(_index){
  if(prevIndex!=_index && !isFirst){
    click_info[prevIndex].clicks = 0;
    clearTimeout(click_info[prevIndex].clock);
  }
  prevIndex = _index;
  isFirst = false;
  if(click_info.hasOwnProperty(_index)){
    ++click_info[_index].clicks;
    clearTimeout(click_info[_index].clock);
  }else{
    click_info[_index] = {};
    click_info[_index].clicks = 0;
  }
  document.getElementById('preview').innerHTML = data[_index][getIndex(_index)] ;
  click_info[_index].clock = setTimeout(function(){
      document.getElementById('result').innerHTML+=data[_index][getIndex(_index)];
      click_info[_index].clicks = -1;
  },300);
}
function getIndex(_index){
  var _length = data[_index].length;
    if(click_info[_index].clicks > _length - 1){
      _length = click_info[_index].clicks % _length ;
    }else{
      _length = click_info[_index].clicks;
    }
  return _length;
}
</script>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var type=0;
var num=0;
var p="";
function init(){
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
if(tds[i].getAttribute("type")){
tds[i].onclick=change
}
}
}
function change(){
var td=document.getElementById("show1");
if(!type){
type=this.getAttribute("type");
td.innerHTML=this.innerHTML.charAt(0);
if(p){
window.clearTimeout(p);
}
p=window.setTimeout(changeTd,500);
}else{
if(type==this.getAttribute("type")){
num++;
num=num%this.innerHTML.length;
td.innerHTML=this.innerHTML.charAt(num);
if(p){
window.clearTimeout(p);
}
p=window.setTimeout(changeTd,500);
}else{
num=0;
type=this.getAttribute("type");
td.innerHTML=this.innerHTML.charAt(num);
if(p){
window.clearTimeout(p);
}
p=window.setTimeout(changeTd,500);
}
}
}
function changeTd(){
var td1=document.getElementById("show1").innerHTML;
var td=document.getElementById("show2");
td.innerHTML+=td1;
}
window.onload=init;
</script>
</head><body>
<table border="1">
  <tr>
   <td id="show1"></td>
   <td colspan="2" height="20px" id="show2"></td>
  </tr>
  <tr>
      <td type="1">1</td>
      <td type="2">2ABC</td>
      <td type="3">3DEF</td>
  </tr>
  <tr>
      <td type="4">4GHI</td>
      <td type="5">5JKL</td>
      <td type="6">6MNO</td>
  </tr>
  <tr>
      <td type="7">7PQRS</td>
      <td type="8">8TUV</td>
      <td type="9">9WXYZ</td>
  </tr>
</table>
</body>
</html>
感谢楼上2位，但我需要的不是通过鼠标点击按键实现这种效果，而是通过按pc键盘上的0~9来实现，感觉应该用到window.event.keyCode元素。
你把点击事件换成document.onkeydown并检测按下的哪个键试试
<style type="text/css">
td{
  width :50px;
  height:50px;
  text-align: center;
  cursor: pointer;
}
#preview , #result{
  width :200px;
  height :100px;
  border: 1px solid;
}
</style>
Preview
<div id="preview"></div>
Result
<div id="result"></div>
<table border="1">
  <tr>
      <td onclick="fn(1)">1</td>
      <td onclick="fn(2)">2,A,B,C</td>
      <td onclick="fn(3)">3,D,E,F</td>
  </tr>
  <tr>
      <td onclick="fn(4)">4,G,H,I</td>
      <td onclick="fn(5)">5,J,K,L</td>
      <td onclick="fn(6)">6,M,N,O</td>
  </tr>
  <tr>
      <td onclick="fn(7)">7,P,Q,R,S</td>
      <td onclick="fn(8)">8,T,U,V</td>
      <td onclick="fn(9)">9,W,X,Y,Z</td>
  </tr>
</table>
<script type="text/javascript">
var data = [
              [],
              [1],
              [2,'A','B','C'],
              [3,'D','E','F'],
              [4,'G','H','I'],
              [5,'J','K','L'],
              [6,'M','N','O'],
              [7,'P','Q','R','S'],
              [8,'T','U','V'],
              [9,'W','X','Y','Z']
          ];
var click_info = {} , prevIndex = -1 , isFirst = true;
function fn(_index){
  if(prevIndex!=_index && !isFirst){
    click_info[prevIndex].clicks = 0;
    clearTimeout(click_info[prevIndex].clock);
  }
  prevIndex = _index;
  isFirst = false;
  if(click_info.hasOwnProperty(_index)){
    ++click_info[_index].clicks;
    clearTimeout(click_info[_index].clock);
  }else{
    click_info[_index] = {};
    click_info[_index].clicks = 0;
  }
  document.getElementById('preview').innerHTML = data[_index][getIndex(_index)] ;
  click_info[_index].clock = setTimeout(function(){
      document.getElementById('result').innerHTML+=data[_index][getIndex(_index)];
      click_info[_index].clicks = -1;
  },300);
}
function getIndex(_index){
  var _length = data[_index].length;
    if(click_info[_index].clicks > _length - 1){
      _length = click_info[_index].clicks % _length ;
    }else{
      _length = click_info[_index].clicks;
    }
  return _length;
}
/*加一个事件就可以了*/
document.onkeyup = function(e){
var _keyCode = event.keyCode || e.which ;
var _char = String.fromCharCode(_keyCode);
if(/[0-9]/.test(_char))
fn(_char);
}
</script>
锅，有什么问题自己可以动手去改改。加个document.onkeyup事件就可以了。已经写好了，看下是不是你要的要求。
上面代码改下
if(/[0-9]/.test(_char))if(/[1-9]/.test(_char))不然输入0的时候会出现undefined