JS实现在文本指定位置插入内容的简单示例


Posted in Javascript onDecember 22, 2017

实例如下所示:

function insertAtCursor(myField, myValue) { 
 
 //IE 浏览器 
 if (document.selection) { 
  myField.focus(); 
  sel = document.selection.createRange(); 
  sel.text = myValue; 
  sel.select(); 
 } 
 
 //FireFox、Chrome等 
 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) + 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(); 
 } 
} 
<textarea id="textarea" style="width: 386px; height: 260px"> 
</textarea> 
<input type="text" id="text" /> 
<input type="button" value="插入" onclick="insertAtCursor(document.getElementById('textarea'),document.getElementById('text').value)" />

以上这篇JS实现在文本指定位置插入内容的简单示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
jquery实现轮播图特效
Apr 12 jQuery
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
JavaScript实现单例模式实例分享
Dec 22 #Javascript
vue使用axios时关于this的指向问题详解
Dec 22 #Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 #Javascript
vue init失败简单解决方法(终极版)
Dec 22 #Javascript
使用axios实现上传图片进度条功能
Dec 21 #Javascript
详解使用webpack构建多页面应用
Dec 21 #Javascript
使用ajax的post同步执行(实现方法)
Dec 21 #Javascript
You might like
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP crc32()函数讲解
2019/02/14 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
Javascript函数的参数
2015/07/16 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python格式化字符串实例总结
2014/09/28 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python属于跨平台语言码
2020/06/09 Python
如何让python的运行速度得到提升
2020/07/08 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
python中最小二乘法详细讲解
2021/02/19 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
如何查找网页漏洞
2016/06/22 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
家长给孩子的表扬信
2014/01/17 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
小学生毕业评语
2014/12/26 职场文书
应届毕业生自荐信
2015/03/04 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL