javascript在一段文字中的光标处插入其他文字


Posted in Javascript onAugust 26, 2007

例如:一个文本框里有一段文字,我要通过点击鼠标并且在相应的地方插入文本
我是这样做的:先获得文本框的值TextArea.Value,然后.TextArea.Value+其他文本

<script type="text/javascript">   
function setCaret(textObj){  
  if(textObj.createTextRange){    
    textObj.caretPos=document.selection.createRange().duplicate();    
  }  
}

function insertAtCaret(textObj,textFeildValue){  
  if(document.all){    
    if(textObj.createTextRange&&textObj.caretPos){      
      var caretPos=textObj.caretPos;      
      caretPos.text=caretPos.text.charAt(caretPos.text.length-1)==''?textFeildValue+'':textFeildValue;
    }else {      
      textObj.value=textFeildValue;      
    }    
  }else {    
    if(textObj.setSelectionRange){      
      var rangeStart=textObj.selectionStart;      
      var rangeEnd=textObj.selectionEnd;      
      var tempStr1=textObj.value.substring(0,rangeStart);      
      var tempStr2=textObj.value.substring(rangeEnd);      
      textObj.value=tempStr1+textFeildValue+tempStr2;      
    }else {      
      alert("This version of Mozilla based browser does not support setSelectionRange");      
    }    
  }  
}    
</script>   

<form id="form1" action="" onsubmit="" method="post" enctype="text/plain">     
<p>   
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;" onselect="setCaret(this);" onclick="setCaret(this);" onkeyup="setCaret(this);">
Dnew.cn  Dnew.cn
</textarea>   
<br/><br/>   
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>   
<br/>   
<input type="button" value="插入" onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>   
</p>   
</form>   

Javascript 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 #Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 #Javascript
javascript下操作css的float属性的特殊写法
Aug 22 #Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 #Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 #Javascript
lib.utf.js
Aug 21 #Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 #Javascript
You might like
php静态文件生成类实例分析
2015/01/03 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
js实现随机点名小功能
2017/08/17 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python之PyUnit单元测试实例
2014/10/11 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
经典的毕业生自荐信范文
2014/04/14 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
离婚协议书格式
2015/01/26 职场文书
台风停课通知
2015/04/24 职场文书
盲山观后感
2015/06/11 职场文书
小组组名及励志口号
2015/12/24 职场文书