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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
javascript中的this作用域详解
Jul 15 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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中array_merge与array+array的区别
2013/06/21 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
node.js基础知识小结
2018/02/26 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
Python中atexit模块的基本使用示例
2015/07/08 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python中hashlib模块用法示例
2017/10/30 Python
Python中的引用知识点总结
2019/05/20 Python
关于python3中setup.py小概念解析
2019/08/22 Python
基于python实现文件加密功能
2020/01/06 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
司机辞职报告范文
2014/01/20 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
创业计划书之面包店
2019/09/12 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫