如何通过js实现页面光标位置的控制

需求：对于通知书打印之后条形码批量扫描录入的功能，需要在上一个text取值改变后将光标的位置移动到下一个为空的text中，当遍历到最后一个text之后，光标移动到保存按钮的位置上。

实现：

1.因为对于不同的浏览器（这里指的是个人非常讨厌的ie，就他特别），处理方法不同，所以需要事先判断用户使用的浏览器类型

eg：function getOs() 

{ 

   var OsObject = ""; 

   if(navigator.userAgent.indexOf("MSIE")>0) { 

        return "MSIE"; 

   } 

   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 

        return "Firefox"; 

   } 

   if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 

        return "Safari"; 

   }  

   if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 

        return "Camino"; 

   } 

   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 

        return "Gecko"; 

   } 

} 

调用该方法就可以返回浏览器的类型了，之后就可以针对浏览器采取措施。需要做的操作有:光标移动的事件触发，以及光标移动的位置。

在系统中我的实现是：

var bowserType = getOs();

if(bowserType=="MSIE"){

$("#advicenote_recordcode_recordBatch_form :text").bind("propertychange",function(){

var trId = $(this).parent().parent().attr("id");//获取当前文本框最外层tr的id

setFocus(trId);

});

}else{

$("#advicenote_recordcode_recordBatch_form :text").on("input",function(){

var trId = $(this).parent().parent().attr("id");//获取当前文本框最外层tr的id

setFocus(trId);

});

}

遍历表单中的text，ie浏览器通过propertychange方法触发光标异动事件，其他浏览器使用on input方法触发事件，之后因实际情况而自行决定获得需要光标移动到的位置。

之后就需要设置光标的位置了，使用的是js的focus方法，很简单，不多说了。

function setFocus(nowTrId){

nowTrId = parseInt(nowTrId)+1;//计算获得下一个tr的id

var textValue = $("#"+nowTrId+" :text").val();

//光标焦点异动

if(textValue==""){

$("#"+nowTrId+" :text").focus();

}else{

var lastMark = $("#"+nowTrId+" input[name='lastTdMark']").val();

if(lastMark=="0"){

setFocus(nowTrId);

}else if(lastMark == "1"){

$("#advicenote_recordcode_recordBatch_form input[name='saveBtn']").focus();

}

}

}

扩展：几种常用到的值改变触发事件

             focus：获得焦点时触发事件

             keyup：按键弹起时触发事件

             keypress：按键按下时触发事件（先响应事件，再显示输入结果（获得的是上一次结果），可能被输入法拦截）

             propertychange：属性改变时触发事件（不管是获得焦点还是value改变等）

优缺点分析：keyup：当键盘按下又松开的时候会出发事件，但是当按到例如ctrl等特殊用途或无用的按键时，也会触发时间

                     propertychange：只针对ie8有效，

 

<!--

$(".txt").change(function(){

    $(".txt").val("");

});

$(".txt").focus(function(){

    $(".txt").val("");

});

$(".txt").keyup(function(){

    var txtChange = $("input").val();

    $("#p2").html(txtChange);

});

$(".txt").keypress(function(){

    var txtChange = $("input").val();

    $("#p2").html(txtChange);

});

$(".txt").bind("propertychange",function(){

    var txtChange = $("input").val();

    $("#p2").html(txtChange);

});

    -->