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 tips提示效果
Apr 03 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
有一段有意思的代码-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 三维饼图的实现代码
2008/09/28 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
koa源码中promise的解读
2018/11/13 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
智能电子应届生求职信
2013/11/10 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
大学旷课检讨书
2014/01/28 职场文书
英语教师求职信
2014/06/16 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python