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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
vue移动端下拉刷新和上滑加载
Oct 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编程与应用
2006/10/09 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
Python的Django框架中的Context使用
2015/07/15 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
公司外出活动方案
2014/08/14 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
白鹤梁导游词
2015/02/06 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python