js --- 获取|设置光标位置

本文介绍了前端开发中获取输入框光标位置及在光标处插入文本的方法。通过`selectionStart`和`selectionEnd`属性获取光标信息,并使用字符串拼接实现文本插入,再调整光标位置,确保用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

只要是前端开发人员,遇到实现输入框是早晚的事情。而关于光标的处理,又是其重中之重的点。

<textarea v-model="textareaValue" id="textarea" name="content" rows="3" placeholder="请输入内容。。。">

1. 获取光标位置

以上述标签为例,如何获取该标签的光标位置呢?

function getCursorPosition(){
	let element = document.getElementById('textarea'); // 获取到指定标签
	let startPos = element.selectionStart; // 获取光标开始的位置
	let endPos = element.selectionEnd; // 获取光标结束的位置
	if (startPos === undefined || endPos === undefined) return; // 如果没有光标位置 不操作
}

2. 光标处添加文本且重新设置光标位置

function insertTxtAndSetcursor(){
	let element = document.getElementById('textarea'); // 获取到指定标签
	let startPos = element.selectionStart; // 获取光标开始的位置
	let endPos = element.selectionEnd; // 获取光标结束的位置
	if (startPos === undefined || endPos === undefined) return; // 如果没有光标位置 不操作
	
	let oldTxt = element.value; // 获取输入框的文本内容
	let result = oldTxt.substring(0, startPos) + '这里是插入的内容' + oldTxt.substring(endPos); // 将文本插入
	element.value = result; // 将拼接好的文本设置为输入框的值
	element.focus(); // 重新聚焦输入框
	element.selectionStart = startPos + insertTxt.length; // 设置光标开始的位置
	element.selectionEnd = startPos + insertTxt.length; // 设置光标结束的位置
}

如此即可将文本插入指定位置并重新定位光标位置

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值