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 Event学习第四章 传统的事件注册模型
Feb 07 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
小程序自定义日历效果
Dec 29 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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 cookis创建实现代码
2009/03/16 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
使用Python对SQLite数据库操作
2017/04/06 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
golang/python实现归并排序实例代码
2020/08/30 Python
三年级评语大全
2014/04/23 职场文书
大学生工作求职信
2014/06/23 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
任命书格式范文
2015/09/22 职场文书
护理心得体会范文
2016/01/22 职场文书
golang正则之命名分组方式
2021/04/25 Golang