如何通过js实现页面光标位置的控制
发布日期:2021-08-13 04:05:42 浏览次数:13 分类:技术文章

本文共 2237 字,大约阅读时间需要 7 分钟。

需求:对于通知书打印之后条形码批量扫描录入的功能,需要在上一个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);

});

    -->

转载于:https://www.cnblogs.com/zp-xdzc/p/3367983.html

转载地址:https://blog.csdn.net/weixin_30675247/article/details/99003084 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:二叉搜索树转换成较大树
下一篇:记录一个简单的HttpClient抓取页面内容

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月07日 04时58分24秒