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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue路由跳转传参数的方法
May 06 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
微信小程序实现页面浮动导航
Jan 08 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
Terran历史背景
2020/03/14 星际争霸
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
详解vue路由
2020/08/05 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
轻松实现python搭建微信公众平台
2016/02/16 Python
python使用正则筛选信用卡
2019/01/27 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
电大毕业生自我鉴定
2013/11/10 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
2013年军训通讯稿
2014/02/05 职场文书
小小商店教学反思
2014/04/27 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
优秀班主任材料
2014/12/16 职场文书
发布会邀请函
2015/01/31 职场文书
办公室规章制度范本
2015/08/04 职场文书
五年级语文教学反思
2016/03/03 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
MySQL基础(一)
2021/04/05 MySQL
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis