input、textarea 输入框------光标操作、指定光标位置插入内容

最新推荐文章于 2024-05-09 14:08:24 发布

一月清辉

最新推荐文章于 2024-05-09 14:08:24 发布

阅读量4.6k

点赞数 1

分类专栏： javascript 文章标签：光标操作输入框指定地方添加内容

原文链接：https://www.cnblogs.com/yoyiorlee/archive/2011/04/04/2005213.html

版权

javascript 专栏收录该内容

134 篇文章 15 订阅

订阅专栏

1、光标处插入指定内容，并移动光标到相应位置

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JS在文本域鼠标指定位置插入文本</title>
		<script type="text/javascript">
			function insertAtCursor(myField, myValue) {
				//IE support
				if(document.selection) {
					myField.focus();
					sel = document.selection.createRange();
					sel.text = myValue;
					sel.select();
				}
				//MOZILLA/NETSCAPE support 
				else if(myField.selectionStart || myField.selectionStart == '0') {
					var startPos = myField.selectionStart;
					var endPos = myField.selectionEnd;
					// save scrollTop before insert www.keleyi.com
					var restoreTop = myField.scrollTop;
					myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
					if(restoreTop > 0) {
						myField.scrollTop = restoreTop;
					}
					myField.focus();
					myField.selectionStart = startPos + myValue.length;
					myField.selectionEnd = startPos + myValue.length;
				} else {
					myField.value += myValue;
					myField.focus();
				}
			}
		</script>
	</head>

	<body>
		<div style="width:500px;margin-left:auto;margin-right:auto;margin-top:100px;">
			<textarea id="keleyi_com" style="width:340px; height:180px"> 柯乐义 Javascript 在textarea光标处插入文本</textarea>
			<input type="button" onclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" />
		</div>
	</body>
</html>

参考链接：https://www.cnblogs.com/jihua/archive/2013/03/21/2974534.html

2、获取当前光标所在位置

//第一步，获取输入框对象
var inputDom = document.getElementsByTagName('input')[0] ; 
//第二步，获取光标的开始位置与结束位置
var startPos = inputDom.selectionStart,
    endPos = inputDom.selectionEnd;

注意： 如果是拖选的区域，则光标selectionStart与selectionEnd不相等，
如果是输入类型的光标(|)，则selectionStart与selectionEnd相等。

3、指定光标位置，或者选中指定区域的内容`setSelectionRange`

3.1、移动光标到指定位置

/*
* ctr: input/textarea输入框的dom对象,
* pos: 光标指定的位置，类型为Number。
*/
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();
	}
}

3.2、默认选中指定区域的文本

<input type="text" id="text-box" size="20" value="Mozilla">
<button onclick="selectText()">Select text</button>

function selectText() {
  const input = document.getElementById('text-box');  
  input.focus();
  input.setSelectionRange(2, 5);
}

结果如下：
在这里插入图片描述

4、插入文本换行

换行字符\n： \n -----》

字符串添加“\n”字符，浏览器解析时自动换行，注意必须是双引号，查看在对象中相应字符串的显示时，字符串\n显示为↵，实际不是\n。

- 在这里插入图片描述

参考链接1：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/setSelectionRange
参考链接2：https://www.webhek.com/post/javascript-get-pointer-position.html
参考链接3：https://www.cnblogs.com/jiqing9006/p/6510114.html
参考链接4：https://www.cnblogs.com/yoyiorlee/archive/2011/04/04/2005213.html

一月清辉

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
input、textarea 输入框------光标操作、指定光标位置插入内容

1、光标处插入指定内容/** obj: input/textarea输入框的dom对象* str: 光标处要插入的内容*/function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart === 'number'
复制链接

扫一扫