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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php IP及IP段进行访问限制的代码
2008/12/17 PHP
定义php常量的详解
2013/06/09 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP连接access数据库
2015/03/27 PHP
帝国cms常用标签汇总
2015/07/06 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js单例模式的两种方案
2013/10/22 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python中的异常处理学习笔记
2015/01/28 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
就业协议书怎么填
2014/04/11 职场文书
员工工作及收入证明
2014/10/28 职场文书
公司催款律师函
2015/05/27 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js