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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
AngularJS表单验证功能
Oct 19 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php curl发送请求实例方法
2019/08/01 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jquery $.ajax入门应用二
2008/11/19 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
softmax及python实现过程解析
2019/09/30 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
环境监测与治理技术专业求职信
2014/07/06 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
关于保护环境的建议书
2019/06/24 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL