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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
微信小程序保存多张图片的实现方法
Mar 05 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
python检测lvs real server状态
2014/01/22 Python
Python OS模块常用函数说明
2015/05/23 Python
Windows下安装Scrapy
2018/10/17 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
毕业生自我鉴定范文
2013/11/08 职场文书
新春寄语大全
2014/04/09 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
优秀教师演讲稿
2014/05/06 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
财务人员岗位职责
2015/02/03 职场文书
工程部主管岗位职责
2015/02/12 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
责任书格式
2019/04/18 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL