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 相关文章推荐
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
JavaScript实现alert弹框效果
Nov 19 Javascript
js实现弹框效果
Mar 24 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
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
yii上传文件或图片实例
2014/04/01 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
js里面的变量范围分享
2020/07/18 Javascript
python备份文件的脚本
2008/08/11 Python
python文件操作整理汇总
2014/10/21 Python
深入理解python函数递归和生成器
2016/06/06 Python
python实现二叉查找树实例代码
2018/02/08 Python
python正则实现提取电话功能
2018/02/24 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
介绍一下linux文件系统分配策略
2013/02/25 面试题
学习礼仪心得体会
2014/09/01 职场文书
民事起诉书范本
2015/05/19 职场文书