JavaScript获取光标位置、定位光标位置

xiaoxiao2021-02-28  8

JavaScript获取光标位置、定位光标位置

某些业务在处理input的输入框的触发oninput时间,需要控制光标位置,此方法依赖于jQuery

获取光标位置

//获取光标位置 (function($){ $.fn.extend({ // 获取当前光标位置的方法 getCurPos:function() { var getCurPos = ''; if ( navigator.userAgent.indexOf("MSIE") > -1 ) { // IE // 创建一个textRange,并让textRange范围包含元素里所有内容 var all_range = document.body.createTextRange();all_range.moveToElementText($(this).get(0));$(this).focus(); // 获取当前的textRange,如果当前的textRange是一个具体位置而不是范围,则此时textRange的范围是start到end.此时start等于end var cur_range = document.selection.createRange(); // 将当前textRange的start,移动到之前创建的textRange的start处,这时,当前textRange范围就变成了从整个内容的start处,到当前范围end处 cur_range.setEndPoint("StartToStart",all_range); // 此时当前textRange的Start到End的长度,就是光标的位置 curCurPos = cur_range.text.length; } else { // 获取当前元素光标位置 curCurPos = $(this).get(0).selectionStart; } // 返回光标位置 return curCurPos; } }); })(jQuery); 定位光标方法

/* 定位光标 */ function setCaretPosition(ctrl, pos){ if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } 举例:只能输入时间字符串,如果输入错误,可以修改,字符串中间出错,在触发oninput事件时光标会自动到最后,给修改带来不便

//只能输入时间 (例如12:00) $(document).on("input",".mustArriveTimes",function(){ if(event.shiftKey||event.altKey||event.ctrlKey||event.keyCode==16||event.keyCode==17||event.keyCode==18||(event.shiftKey&&event.keyCode==36)) return; var pos=$(this).getCurPos();//保存原始光标位置 var temp = $(this).val(); $(this).val($(this).val().replace(/[^-+\d]/g,'')); if($(this).val().length > 6){ var afterstr = $(this).val().substr(pos-(temp.length-$(this).val().length),$(this).val().length); var beforestr = $(this).val().substr(0,pos-1); $(this).val(beforestr + afterstr); } pos=pos-(temp.length-$(this).val().length);//当前光标位置 setCaretPosition($(this)[0],pos);//设置光标 /*if($(this).val().length == 2){ $(this).val($(this).val()+':'); }else if($(this).val().length > 7){ */ //} });

转载请注明原文地址: https://www.6miu.com/read-450235.html

最新回复(0)