关于input和textarea文本框光标定位问题

最新推荐文章于 2020-11-17 17:55:13 发布

中古遗人

最新推荐文章于 2020-11-17 17:55:13 发布

阅读量1.6k

点赞数 1

分类专栏： WEB前端

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求：在弹出的页面中会有文本框，需要光标聚焦在文本框并且，

当文本框内有值的情况下，光标显示在文本框内容末尾。

兼容：IE,FF,Chrome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
	margin: 32px;
	font-family: Verdana, sans-serif;
	font-size: 13px;
}

.title {
	font-size: 18px;
	font-weight: bolder;
	margin: 40px 0;
}

.input {
	width: 50%;
	font-family: Verdana, sans-serif;
	font-size: 13px;
	text-indent: 2px;
}
</style>
<script>
	//获取光标位置 
	//单行文本框 
	function getPositionForInput(ctrl) {
		var CaretPos = 0;
		if (document.selection) { // IE Support 
			ctrl.focus();
			var Sel = document.selection.createRange();
			Sel.moveStart('character', -ctrl.value.length);
			CaretPos = Sel.text.length;
		} else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support 
			CaretPos = ctrl.selectionStart;
		}
		return (CaretPos);
	}
	//多行文本框 
	function getPositionForTextArea(ctrl) {
		var CaretPos = 0;
		if (document.selection) {// IE Support 
			ctrl.focus();
			var Sel = document.selection.createRange();
			var Sel2 = Sel.duplicate();
			Sel2.moveToElementText(ctrl);
			var CaretPos = -1;
			while (Sel2.inRange(Sel)) {
				Sel2.moveStart('character');
				CaretPos++;
			}
		} else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support 
			CaretPos = ctrl.selectionStart;
		}
		return (CaretPos);
	}
	//设置光标位置函数 
	function setCursorPosition(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();
		}
	}
	//test 
	function process(id, targetId) {
		var no = document.getElementById(id).value;
		setCursorPosition(document.getElementById(targetId), no);
	}

	function setautofocus(){
		var textarea = document.getElementById("zhangdanNum");
		var textarealength = getPositionForTextArea(textarea);
		var num = textarea.value;
		setCursorPosition(textarea,num.length);

	}
</script>
</head>
<body οnlοad="setautofocus()">
	<div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div>
	<div class="title">单行文本框</div>
	<p>
		<input class="input" id="textbox" name="textbox"
			value="Hi,www.jb51.net!!!" />
	</p>

	<input type="button"
		οnclick="alert( getPositionForInput( document.getElementById('textbox') ) )"
		value="Get Position"> 输入位置:
	<input type="text" id="no1" size="1" />
	<input type="button" οnclick="process('no1','textbox');"
		value="Set Position">

	<div class="title">多行文本框</div>
	<textarea id="zhangdanNum" name="zhangdanNum"
		style="height: 66px; width: 246px; overflow: hidden">aaaaa</textarea>
	<input type="button"
		οnclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )"
		value="Get Position"> 输入位置:
	<input type="text" id="no2" size="1" />
	<input type="button" οnclick="process('no2','zhangdanNum');"
		value="Set Position">
</body>
</html>

此方法是是转载网上，因没能找到原出处，不能写明原始地址，望请谅解！

中古遗人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于input和textarea文本框光标定位问题

需求：在弹出的页面中会有文本框，需要光标聚焦在文本框并且，当文本框内有值的情况下，光标显示在文本框内容末尾。兼容：IE,FF,ChromeJavaScript 获取/设置光标位置,兼容Input&&TextArea。body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px;}.
复制链接

扫一扫

专栏目录