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程序中美元符号$是什么
Jun 05 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php计算十二星座的函数代码
2012/08/21 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
js去除浏览器默认底图的方法
2015/06/08 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
自荐信格式简述
2014/01/25 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
小学生读书活动总结
2014/06/30 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
教务处教学工作总结
2015/08/10 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers