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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
TS 类型收窄教程示例详解
Sep 23 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 正则 过滤html 的超链接
2009/06/02 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
初识php MVC
2014/09/10 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
深入理解node.js之path模块
2017/05/03 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python连接DB2数据库
2016/08/27 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python实现多层感知器
2019/01/18 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
人事主管岗位职责
2015/02/04 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
综合管理员岗位职责
2015/02/11 职场文书
质量保证书格式
2015/02/27 职场文书
任命书怎么写
2015/03/02 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
会计专业自荐信范文
2019/05/22 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技