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)。