input输入框在光标处，插入文本段

在项目中会遇到这样的情况，用户可以在textarea中输入，也可以选择既有的可供选择的段落，现需求是用户把光标放在哪，用户选择后的段落就插进该处位置。

实现方式主要是依靠俩点：
一、利用
doxument.selection （这是IE的）
docuemnt.getElementById(xxxx).selsectionStart （这是谷歌等的）
这俩个属性来找到光标的位置

二、就是利用字符串的substring 的方式切割再拼接；

以下是源代码

在vue项目中的代码

         const areaField = this.$refs.voicearea; // 拿到目标标签；// IE浏览器if (document.selection) {areaField.focus();const sel = document.selection.createRange();sel.text = item.text;} // 谷歌 Firefox 等else if (areaField.selectionStart || areaField.selectionStart === '0') {const startPos = areaField.selectionStart;const endPos = areaField.selectionEnd;const restoreTop = areaField.scrollTop;  // 获取滚动条高度//  this.waitingTextArea 是v-model的值// item.text 是 选择的要插入的值this.waitingTextArea = this.waitingTextArea.substring(0, startPos) + item.text+ this.waitingTextArea.substring(endPos, this.waitingTextArea.length);if (restoreTop > 0) {areaField.scrollTop = restoreTop;}areaField.focus();areaField.selectionStart = startPos + item.text.length;areaField.selectionEnd = startPos + item.text.length;} else {this.waitingTextArea += item.text;areaField.focus();}

原生写法

<!doctype html>
<html>
<head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input name="" id="txt1" cols="30" rows="10"   ：placeholder= /><br><input type="text" name="" id="txt2">
<input type="button" value="添加" id="btn">
<input type="button" value="获取内容" id="btn1" οnclick="get()"><div id="thistext"></div>
<script type="text/javascript">window.onload = function(){var oTxt1 = document.getElementById("txt1");var oTxt2 = document.getElementById("txt2");var oBtn = document.getElementById("btn");oBtn.onclick = function(){getValue("txt1", oTxt2.value);}}
</script>
<script type="text/javascript">function get(){document.getElementById("thistext").innerHTML=document.getElementById("txt1").value;console.log(document.getElementById("txt1").value)}//了在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数    //objid：textarea的id   str：要插入的内容function getValue(objid,str){var myField=document.getElementById(""+objid);//IE浏览器if (document.selection) {myField.focus();sel = document.selection.createRange();sel.text = str;sel.select();}//火狐/网景 浏览器else if (myField.selectionStart || myField.selectionStart == '0'){//得到光标前的位置var startPos = myField.selectionStart;//得到光标后的位置var endPos = myField.selectionEnd;// 在加入数据之前获得滚动条的高度var restoreTop = myField.scrollTop;myField.value = myField.value.substring(0, startPos) + str + myField.value.substring(endPos, myField.value.length);//如果滚动条高度大于0if (restoreTop > 0) {// 返回myField.scrollTop = restoreTop;}myField.focus();myField.selectionStart = startPos + str.length;myField.selectionEnd = startPos + str.length;}else {myField.value += str;myField.focus();}}
</script></body>
</html>

input输入框在光标处，插入文本段相关推荐

jQuery实现在光标处插入文本
jquery.caretInsert.js : Code jQuery.extend({ /** * 清除当前选择内容 */ unselectCo ...
firefox下光标处插入文本
做可视化编辑的器的时候突然发现一个问题,原来在TEXTAREA里面,FF的做法是: var rangeStart=textObj.selectionStart; var range ...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
这周碰到一个东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区 ...
ComponentOne Wijmo Editor 在光标处添加文本
ComponentOne Wijmo Editor 是一款强大的HTML 编辑器,可以插入table, p_w_picpath, links 等标签,但是没有在光标处直接插入标签的功能.但是,现在Wi ...
使用JS在textarea在光标处插入内容
为什么80%的码农都做不了架构师?>>> // 在光标处插入字符串// myField 文本框对象// myValue 要插入的值function insertAtCursor ...
ComponentOne Wijmo HTML Editor 在光标处添加文本
ComponentOne Wijmo Editor 是一款强大的HTML 编辑器,可以插入table, image, links 等标签,但是没有在光标处直接插入标签的功能.但是,现在Wijmo Ed ...
html input鼠标提示,input输入框鼠标焦点提示信息
input输入框鼠标焦点提示信息问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下: 复制代码代码如下: 注意点为input的 ...
控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是选区开始的位置: selec ...
ios html 全选文本框,【前端】IOS input输入框按删除键删除字符，删除最后一个字符时，概率性出现光标前面多余一个字符...
IOS input输入框按删除键删除字符,删除最后一个字符时,概率性出现光标前面多余一个字符,并且placeholder文字也能显示出来回答删除最后一个字符时延迟一毫秒我用了vue,input[ ...

input输入框在光标处，插入文本段

input输入框在光标处，插入文本段相关推荐

最新文章

热门文章

input输入框在光标处， 插入文本段

input输入框在光标处， 插入文本段相关推荐

最新文章

热门文章

input输入框在光标处，插入文本段

input输入框在光标处，插入文本段相关推荐