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操作css属性
Dec 30 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
Express框架之connect-flash详解
May 31 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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开发工具之vs2005图解
2008/01/12 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
公务员培的训心得体会
2014/09/01 职场文书
计划生育证明书写要求
2014/09/17 职场文书
企业法人任命书
2015/09/21 职场文书
党章学习心得体会2016
2016/01/14 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
PyTorch中的torch.cat简单介绍
2022/03/17 Python
详解Python内置模块Collections
2022/03/22 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python