JS在textarea光标处插入文本

最新推荐文章于 2020-07-01 14:09:56 发布
最新推荐文章于 2020-07-01 14:09:56 发布
阅读量102 收藏
点赞数
文章标签： javascript xhtml ViewUI

本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器,效果网址：http://keleyi.com/dev/36d87291ba370420.htm

 

下面是代码:

--------------------------------------------------------------------------------
<!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>
<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" οnclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" />
</div></body>
</html>

本文转载自柯乐义http://keleyi.com/dev/36d87291ba370420.htm

weixin_34144848
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
编辑框光标位置插入文本
12-19
编辑框光标位置插入文本
vue在光标处加入内容
qq_38143787的博客
11-10 1035
vue如何在光标处插入文字
使用JS在textarea在光标处插入内容
我的专栏
09-09 5191
// 在光标处插入字符串     // myField    文本框对象     // myValue 要插入的值     function insertAtCursor(myField, myValue)     {         //IE support         if (document.selection)         {             myFie
如何在textarea的光标位置插入文字
wangshfa的专栏
07-07 2888
在网上看了很多用js在光标处插入文字的代码，很多都没有用，互抄而已，浪费时间。最近用到一个新方法，可以到达这个需求。IE支持document.selection，Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性。 效果演示       代码如下： view source pr
JS在textarea光标处插入文本的小例子
10-27
本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器
在textarea光标处插入文本
11-14
在textarea光标处插入文本
jQueryCursorPlugIn.js textArea文本光标全功能插件
04-21
jQuery textArea文本光标全功能插件，可以获取光标位置，向光标文字插入文本，高亮显示指定的文本块
vue获取textarea的光标位置.js
08-13
vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入
在文本框中插入值/将光标移动到末尾
甲壳
04-05 598
function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart === 'number' &amp;...
(二)vue获取鼠标位置，在光标位置插入文本（三）v-for循环的元素获取鼠标位置，在光标处插入文本
Sunny_lxm的博客
08-28 8053
另一种获取光标的方法见文章https://blog.csdn.net/Sunny_lxm/article/details/89445518 （一）、单元素 效果： <!-- 单元素获取光标位置 --> <div class="el-textarea"> <textarea v-model="content" id="textarea" typ...
JS获取textarea的光标位置并插入内容
指间时光
07-24 1493
//objid：textarea的id   str：要插入的内容 function getValue(objid,str){    var myField=document.getElementById(""+objid);    //IE浏览器      if (document.selection) {        myField.focus();        sel =
奇技淫巧——在textarea中插入文本
韭菜的故事
07-26 7296
本文首发我的简书 今天在看自己的记录时发现在几个月前的一个项目中碰到一个这样的需求：做一些简单的计算按钮，点击这些按钮之后就在后面的输入框中显示对应的计算方法，对于一些函数类的计算方法需要将光标定位在括号里面，效果如下图： 当时也是第一次碰到这种需求，我搜集了网络上的一些资料最终解决这个问题，现将这个小技巧整理一下以备日后查阅。 本文的关键点：在光标后插入文本的方法（来源http...
Vue获取textarea光标插入内容
man_nam_man的博客
07-01 2331
<div style="background-color: #efefef; width:100%;height: 300px;"> <textarea ref="contentArea" v-model="contentFormula" style="width: 100%;height: 100%"> {{contentFormula}} </textarea> </div> const myField = this.$refs.
js实现在光标的位置 添加内容
嘿嘿
01-15 1300
原生js的方法： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> ...
用js在TextArea中的光标位置插入内容的方法
st780206的专栏
01-19 894
用js在TextArea中的光标位置插入内容的方法（比较完美） 做UBB版在线编辑器应该会用到，用js在TextArea中的光标位置插入内容的方法.   国内网上给出的方法简直是误人子弟，外文站上也都不是太完整，雷锋一回，整理了一套比较好的,代码如下:       myField = document.getElementById("文本控件的ClientID"); ...
在光标处插入指定文本（支持文本域和文本框）
a304096740的博客
03-24 396
var comm={ getPositionForInput:function(ctrl){ //普通文本框 var CaretPos = 0; if (document.selection) { // IE Support ...
在 textarea中指定位置插入内容
fan7421436的专栏
05-12 3732
完全使用 javascript 来实现，这里我也是从其它博客转载来一部分实现的，可以完美解决IE7+不兼容问题，并且包含谷歌、火狐，更不用说什么360/360急速、搜狗浏览器了   function insertAtCursor(myField, myValue) { //IE support if (document.selection) { do...
textarea 光标位置插入
最新发布
10-11
textarea 光标位置插入是指在文本区域（textarea）中的光标位置上插入新的文本或内容。 要实现在指定位置插入文本，可以通过以下步骤进行： 1. 获取文本区域的光标位置，可以使用textarea元素的selectionStart和selectionEnd属性来获取。 2. 将要插入的文本与原有文本分成两个段落，即左侧和右侧。 3. 将左侧段落与要插入的文本拼接起来，再拼接右侧段落，形成新的文本。 4. 将新的文本重新赋给文本区域。 以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Textarea光标位置插入示例</title> <script> function insertText() { var textarea = document.getElementById("myTextarea"); var position = textarea.selectionStart; var textToInsert = "新的文本"; var originalText = textarea.value; var newText = originalText.slice(0, position) + textToInsert + originalText.slice(position); textarea.value = newText; } </script> </head> <body> <textarea id="myTextarea"></textarea> <button onclick="insertText()">在光标位置插入</button> </body> </html> ``` 在上述示例中，我们通过获取textarea元素的selectionStart属性获得光标位置，并使用slice函数将原有文本按照光标位置拆分成左右两个段落。接着，我们将新的文本插入到左侧段落中，并再次拼接上右侧段落，最后将新的文本赋给textarea的value属性即可。 这样，当点击按钮时，就能在光标位置插入指定的新文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值