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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JS 建立对象的方法
Apr 21 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 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
URL Rewrite的设置方法
2007/01/02 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python中cPickle类使用方法详解
2018/08/27 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
找工作最新求职信
2013/12/22 职场文书
施工安全生产承诺书
2014/05/23 职场文书
倡议书格式
2014/08/30 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL