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 21 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
React配置子路由的实现
Jun 03 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 Memcache 中实现消息队列
2009/11/24 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python fileinput模块使用实例
2015/05/28 Python
python GUI实例学习
2017/11/21 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
如何理解python面向对象编程
2020/06/01 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
便利店促销方案
2014/02/20 职场文书
出生医学证明书
2014/09/15 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
学校党员干部承诺书
2015/05/04 职场文书
八月一日观后感
2015/06/10 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers