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 相关文章推荐
javascript 节点排序 2
Jan 31 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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求正负数数组中连续元素最大值示例
2014/04/11 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python用插值法绘制平滑曲线
2021/02/19 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
解决Python中回文数和质数的问题
2019/11/24 Python
tensorflow多维张量计算实例
2020/02/11 Python
Django如何使用redis作为缓存
2020/05/21 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
英语商务邀请函范文
2014/01/16 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
同意离婚答辩状
2015/05/22 职场文书