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

最新推荐文章于 2026-03-31 09:56:27 发布

原创最新推荐文章于 2026-03-31 09:56:27 发布 · 5.8k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了一种使用JavaScript和jQuery来获取及设置输入框内光标位置的方法，适用于处理特定格式输入（如时间）的需求，确保用户能准确地进行编辑。

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){	*/
	//}
});