14. 表单的键盘控制与控件聚焦。
在Web应用开发中，键盘操作控制可以通过绑定控件的keydown事件实现。本例创建的表单中包含文本框、日期框、组合框、复选框等多种控件。键盘控制要求在页面初始化时将光标聚焦在第一个控件（学号）上，当用户按下回车键、向下键（↓）、向上键（↑）时，光标自动将聚焦到相应的下一个或上一个控件上。本例键盘控制的具体实现过程和程序如下：
①通过$('input, select, textarea').each(function(index)遍历方法，将上述不同类型的控件与keydown事件绑定，具体控制键盘操作的程序在函数fnKeyDownEvent()中实现。
$('input, textarea').each(function(index){
var input = $(this);
var id=input.attr('id');
var value=undefined;
var type=input.attr('type');
var hidden=input.attr('hidden');
if (hidden!='hidden' && id!=undefined && type!='checkbox'){
if (type=='textarea'){
$('#'+id).on('keydown', 'input', function(e){
fnKeyDownEvent(e,id);
});
}else{
$('#'+id).textbox('textbox').bind('keydown',function(e){
fnKeyDownEvent(e,id);
});
}
}
});
②在fnKeyDownEvent函数中，使用e.which获取当前键盘值（即用户按下的键盘值）；通过页面遍历，将各个控件的标识符和类别存放到数组xcmp和xtype中，并求出当前控件的数组下标，存放到变量xno中；根据键盘值找到新聚焦控件的标识符。例如，当键盘值为回车键或向下键时，新聚焦控件为xcmp[xno+1]；当键盘值为向上键时，新聚焦控件为xcmp[xno-1]。
在jQuery和EasyUI中，textarea控件的遍历与聚焦方式与其它控件不同，它可直接使用jQuery语句实现，例如：$("#"+id).focus(); 而文本框等其它控件则使用不同的聚焦方式，例如：$("#"+id).next("span").find("input").focus();
function fnKeyDownEvent(e,id){
var key=e.which;
var xcmp=[];
var xtype=[];
var i=0;
if (key==13 || key==40 || key==38){ //38--up 40--down
var xno=-1;
$('input, textarea').each(function(index){
var input = $(this);
field=input.attr('id');
type=input.attr('type');
hidden=input.attr('hidden');
if (field!=undefined && hidden!='hidden' && type!='checkbox'){
if (id==field) xno=i;
xcmp[i]=field;
xtype[i]=type;
i++;
}
});
if (xno<xcmp.length && xno>=0){
var n=0;
if (key==13 || key==40 ){ //向下
if (xno<=i) n=xno+1;
else n=i;
}else if (key==38 ){ //向上
if (xno>0) n=xno-1;
else n=0;
}
var xnewcmp=xcmp[n];
var xtype=xtype[n];
if (xtype=='textarea') $("#"+xnewcmp).focus();
else $("#"+xnewcmp).next("span").find("input").focus();
}
}
}
③当光标聚焦到某个控件时，实现全选该文本框中的内容，类似于有些软件开发工具中的selectAll的效果。
function fnSelectOnFocus(){
$('input').on('focus', function() {
var $this = $(this)
.one('mouseup.mouseupSelect', function() {
$this.select();
return false;
})
.one('mousedown', function() {
$this.off('mouseup.mouseupSelect');
})
.select();
});
本例键盘控制程序仅适合于textbox、datefield、combobox、textarea等类型控件，对checkbox控件不作处理。
思考题：
如何判断textarea控件中光标在输入框中的第一行第一个字符的位置，这时如果按向上键，则将光标聚焦到上一个控件上（set cursor position in a text field）。