前言：有的时候我们设置input的时候直接用DW里面的按钮做成“真焦点”，但是有的时候可能需要涉及到使用“假焦点”的方式进行处理。
关键：
1.外部input.js（其实就是一个函数，一个类）
2.页面写JS调用外部的input.js代码，来实现假焦点光标的移动和input里面值的添加与删除
思想：
需要掌握改变类的对象的属性，来实现页面光标的移动和input数据的改变。
INPUT.JS:
function input_obj(id,type,start_str,cursor_img,blank_img,img_height,max_world){
this.id = id; //输入框对应td的id，可自行修改
this.type = (typeof(type)=="undefined"?'normal':type);
this.start_str = (typeof(start_str)=="undefined"?'':start_str);//文本框中初始的默认值
this.cursor_img = (typeof(cursor_img)=="undefined"?'images/focus_input.gif':cursor_img);//光标的图片名称,默认为'focus.gif',可自行修改
this.blank_img = (typeof(blank_img)=="undefined"?'images/global_tm.gif':blank_img);//透明图片名称,默认为'global_tm.gif',可自行修改
this.img_height = (typeof(img_height)=="undefined"?25:img_height);//图片的高度,默认为25,可自行修改
this.max_world = (typeof(max_world)=="undefined"?6:max_world);//定义最多输入的字符数,默认为4,可自行修改
this.input_timeout = -1;//输入时的timeout flag
this.num_list = [
["0"],
[".","1"],
["A","B","C","2","a","b","c"],
["D","E","F","3","d","e","f"],
["G","H","I","4","g","h","i"],
["J","K","L","5","j","k","l"],
["M","N","O","6","m","n","o"],
["P","Q","R","S","7","p","q","r","s"],
["T","U","V","8","t","u","v"],
["W","X","Y","Z","9","w","x","y","z"]
];//输入法之间切换的内容
this.input_str = this.start_str;//输入的字母
this.list_index = -1;//按下的键的位置
this.input_index = 0;//键盘中对应字母的位置
this.cursor_pos = this.input_str.length;//标记光标的位置
this.pwd_mark = "●";//输入密码时显示出来的星号
/*-------------------------对光标初始化----------------------------------*/
this.show_cursor=function(){
this.$(this.id).innerHTML = this.get_str();
};
/*-----------------------对捕获到的键值进行处理,并在输入框中显示------------------------*/
this.get_input=function(num){
if(this.type == "password"||this.type == "num"){//如果输入的为密码或数字
if(this.input_str.length<this.max_world){//当输入字符数不小于max_world的时候将不再响应
this.input_str=this.input_str.substr(0,this.cursor_pos)+num+this.input_str.substr(this.cursor_pos);
this.cursor_pos++;
this.$(this.id).innerHTML = this.get_str();
}
}else{//输入的为文字
if(this.list_index == num){//重复按下同一个键
if(this.input_str.length<(this.max_world+1)){//当输入字符数大于max_world的时候将不再响应
this.input_index++;
if (this.input_index>=this.num_list[num].length) this.input_index=0;
clearTimeout(this.input_timeout);
var self = this;
this.input_timeout = setTimeout(function(){self.list_index=-1}, 800);//超过800毫秒则不认为按的是同一个键.
var select_list = this.num_list[this.list_index];
this.input_str = this.input_str.substr(0,(this.cursor_pos-1)) + select_list[this.input_index]+this.input_str.substr(this.cursor_pos);//按同一个键的时候只改变input_str的最后一个字母
this.$(this.id).innerHTML = this.get_str();
}
}else{//否则记录当前键的位置,并把对应的键的字母写入input_str
if(this.input_str.length<this.max_world){//当输入字符数不小于max_world的时候将不再响应
this.list_index = num;
clearTimeout(this.input_timeout);
var self = this;
this.input_timeout = setTimeout(function(){self.list_index=-1}, 800);//超过800毫秒则不认为按的是同一个键.
this.input_index = 0;//还原input_index的值
var select_list = this.num_list[this.list_index];
this.input_str=this.input_str.substr(0,this.cursor_pos)+select_list[this.input_index]+this.input_str.substr(this.cursor_pos);
this.cursor_pos++;
this.$(this.id).innerHTML = this.get_str();
}
}
}
};
/*-------------------------删除光标前面的那个文字---------------------------*/
this.del_input=function (){
if (this.input_str.length>0&&this.cursor_pos>0){
this.cursor_pos--;
this.input_str = this.input_str.substr(0,this.cursor_pos)+this.input_str.substr(this.cursor_pos+1);
this.$(this.id).innerHTML = this.get_str();
}
};
/*-------------------------移动光标的位置-----------------------------*/
this.move_input=function(num){
this.cursor_pos+=num;
if(this.cursor_pos<0) this.cursor_pos=0;
else if(this.cursor_pos>this.input_str.length) this.cursor_pos = this.input_str.length;
this.$(this.id).innerHTML = this.get_str();
};
/*----为了让光标在左右移动过程中不出现字体晃动的现象,
在每个字符之间都加入了一个和光标大小一样的透明图片,下面函数主要是实现这个功能---*/
this.get_str=function(){
var b_img = '<img src='+this.blank_img+' width=2 height='+this.img_height+'>';
var c_img = '<img src='+this.cursor_img+' width=2 height='+this.img_height+'>';
var temp_str = ((this.cursor_pos>0)?b_img:c_img);
if(this.type == "password"){//如果输入的为密码
for (var i=0;i<this.input_str.length;i++){
if(i==(this.cursor_pos-1)) temp_str+= this.pwd_mark+c_img;
else temp_str+= this.pwd_mark+b_img;
}
}else if(this.type == "num"){
for (var i=0;i<this.input_str.length;i++){
if(i==(this.cursor_pos-1)) temp_str+= this.input_str.charAt(i)+c_img;
else temp_str+= this.input_str.charAt(i)+b_img;
}
}else{
if(this.cursor_pos>0){
for (var i=0;i<(this.cursor_pos-1);i++){
temp_str+=this.input_str.substr(i,1)+b_img;
}
temp_str+=this.input_str.substr((this.cursor_pos-1),1)+c_img;
}
for (var j=this.cursor_pos;j<this.input_str.length;j++){
temp_str+=this.input_str.substr(j,1)+b_img;
}
}
return temp_str;
};
/*----------------------定义失去焦点时的操作-------------------------------*/
this.lose_focus = function(){
var b_img = '<img src='+this.blank_img+' width=2 height='+this.img_height+'>';
var temp_str = b_img;
if(this.type == "password"){//如果输入的为密码
for (var i=0;i<this.input_str.length;i++){
temp_str+= this.pwd_mark+b_img;
}
}else{
for (var i=0;i<this.input_str.length;i++){
temp_str+= this.input_str.charAt(i)+b_img;
}
}
this.$(this.id).innerHTML = temp_str;
}
/*----------------简单的定义一个获取id的方法---------------*/
this.$= function(id) {
return document.getElementById(id);
}
};
HTML:
<!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=gb2312" />
<title>假焦点输入Case</title>
<script language="javascript" src="input.js"></script>
<script type="text/javascript">
var pos=0;//定义光标的起始位置
var inputObjts = new Array();//定义一个变量，该变量是一个数组
inputObjts[0] = new input_obj("input0","num","Admin");//定义一个类的实例对象
inputObjts[1] = new input_obj("input1","password","");
inputObjts[2] = new input_obj("input2","password","");
function showFoucs(__num){
inputObjts[pos].lose_focus();
pos+=__num;
if(pos<0)pos=0;
else if(pos>inputObjts.length-1)pos=inputObjts.length-1;
inputObjts[pos].show_cursor();
}
function init(){
showFoucs(0);
}
document.onsystemevent = grabEvent;
document.onkeypress = grabEvent;
document.onirkeypress=grabEvent;
function grabEvent(){
var key_code = event.which;
switch(key_code){
case 1://up
case 269:
showFoucs(-1);
return 0;
break;
case 2://down
case 270:
showFoucs(1)
return 0;
break;
case 3://left
case 271:
if(inputObjts[pos].input_str.length>0)inputObjts[pos].del_input();
return 0;
break;
case 4://right
case 272:
return 0;
break;
case 340://back
case 339:
return 0;
break;
case 13:
alert(inputObjts[0].input_str+"+"+inputObjts[1].input_str+"+"+inputObjts[2].input_str);
return 0;
break;
case 48:
case 49:
case 50:
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57:
var num = key_code - 48;
inputObjts[pos].get_input(num);//获取输入的数字
return 0;
break;
}
}
</script>
</head>
<body onload="init();">
<br />
<br />
<br />
<table width="500" border="1" cellspacing="1" cellpadding="1" align="center" style="font-size:24px;">
<tr>
<td width="120" height="40" align="right">用户名：</td>
<td width="180" id="input0"> </td>
</tr>
<tr>
<td height="40" align="right">密码：</td>
<td id="input1"> </td>
</tr>
<tr>
<td height="40" align="right">验证码：</td>
<td id="input2"> </td>
</tr>
</table>
</body>
</html>
