我想在textarea光标指定地方插入内容,我用下面方法可以在IE ,但火狐下面不可以。

<html> <head> <script type='text/javascript'> function test(){ document.getElementById("mytextarea").focus(); str="这是需要加入的文字" with(document.setSelectionRange(0,0)) { text = str; collapse(); select(); } }</script> </head> <body> <textarea rows=5 name=s1 cols=27 id="mytextarea">目的通过点击页面上的按钮button 在textarea中的光标停留处插上文字</textarea> <input type=button onclick="test()" /> </body> </html>
2011-01-10 03:44:07

2 Answers

下面代码应该能满足你的需求:

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript"> var cursPos; // 窗口全局变量,保存目标 TextBox 的最后一次活动光标位置 function insertText() { var txt1 = document.getElementById("Text1"); var txt2 = document.getElementById("Text2"); //debugger; if(!cursPos) TraceCursorPosition(txt2); // 获取光标位置 txt2.value = txt2.value.slice(0, cursPos.start) + txt1.value + txt2.value.slice(cursPos.end) } // 跟踪光标位置 function TraceCursorPosition(obj) { //debugger; cursPos = $CursorPosition(obj); } // 返回光标所在位置 function $CursorPosition(textBox){ var start = 0, end = 0; //如果是Firefox(1.5)的话,方法很简单 if(typeof(textBox.selectionStart) == "number"){ start = textBox.selectionStart; end = textBox.selectionEnd; } //下面是IE(6.0)的方法,麻烦得很,还要计算上'\n' else if(document.selection) { var range = document.selection.createRange(); if(range.parentElement().id == textBox.id) { // create a selection of the whole textarea var range_all = document.body.createTextRange(); range_all.moveToElementText(textBox); //两个range,一个是已经选择的text(range),一个是整个textarea(range_all) //range_all.compareEndPoints()比较两个端点,如果range_all比range更往左(further to the left),则 //返回小于0的值,则range_all往右移一点,直到两个range的start相同。 // calculate selection start point by moving beginning of range_all to beginning of range for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++) range_all.moveStart('character', 1); // get number of line breaks from textarea start to selection start and add them to start // 计算一下\n for (var i = 0; i <= start; i ++) { if (textBox.value.charAt(i) == '\n') start++; } // create a selection of the whole textarea var range_all = document.body.createTextRange(); range_all.moveToElementText(textBox); // calculate selection end point by moving beginning of range_all to end of range for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++) { range_all.moveStart('character', 1); } // get number of line breaks from textarea start to selection end and add them to end for (var i = 0; i <= end; i ++) { if (textBox.value.charAt(i) == '\n') end ++; } } } //return [start, end]; // 包括选中区域的起始位置 // modified to return as Object return { "start": start, "end": end, "item": [start, end] }; } </script> </head> <body> input :<input id="Text1" type="text" /><input id="Button1" type="button" value="Insert" onclick="insertText()" /><br /> output:<textarea id="Text2" cols="40" rows="10" onkeydown="TraceCursorPosition(this)" onkeypress="TraceCursorPosition(this)" onfocus="TraceCursorPosition(this)" onselect="TraceCursorPosition(this)" onmouseover="TraceCursorPosition(this)" onmousedown="TraceCursorPosition(this)">hello world!</textarea><br /> </body> </html>

2011-01-10 05:26:26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>edit</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <meta name="keywords" content="XH.WebV7.0.0-Blog"> <meta http-equiv="pragma" content="no-cache"> <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> </head> <body> <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="插入文字"/> <br/> <input type="button" value="插入" onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/> </p> </form> </body> </html>
2011-01-10 07:34:23
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制