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的滚动新闻列表
Jun 19 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
js实现蒙版效果
Jan 11 Javascript
原生js+canvas实现下雪效果
Aug 02 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在Web开发领域的优势
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
二招解决php乱码问题
2012/03/25 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP云打印类完整示例
2016/10/15 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
jQuery的基本概念与高级编程
2015/05/14 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
abstract class和interface有什么区别
2013/08/04 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
党支部综合考察材料
2014/05/19 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
2015元旦感言
2015/12/09 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python