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与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
深入掌握 react的 setState的工作机制
Sep 27 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
React中的refs的使用教程
2018/02/13 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
深入理解Python3中的http.client模块
2017/03/29 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
公司担保书范文
2014/05/21 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
新党章心得体会
2014/09/04 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
pandas进行数据输入和输出的方法详解
2022/03/23 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL