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 相关文章推荐
菜单效果
Oct 14 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
canvas绘制折线路径动画实现
May 12 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+ajax实时聊天室
2016/07/20 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
用Python实现KNN分类算法
2017/12/22 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
EJB timer的种类
2014/10/28 面试题
《维生素c的故事》教学反思
2014/02/18 职场文书
人力资源作业细则
2014/03/03 职场文书
公司新年寄语
2014/04/04 职场文书
会计学毕业生求职信
2014/06/25 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
家长反馈意见及建议
2015/06/03 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
护理培训心得体会
2016/01/22 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android