js或jquery在textarea光标位置后面添加文本

$fnextend({    

05        position:function( value ){    

06            var elem = this[0];    

07                if (elem&&(elemtagName=="TEXTAREA"||elemtypetoLowerCase()=="text")) {    

08                   if($browsermsie){    

09                           var rng;    

10                           if(elemtagName == "TEXTAREA"){    

11                                rng = eventsrcElementcreateTextRange();    

12                                rngmoveToPoint(eventx,eventy);    

13                           }else{    

14                                rng = documentselectioncreateRange();    

15                           }    

16                           if( value === undefined ){    

17                             rngmoveStart("character",-eventsrcElementvaluelength);    

18                             return  rngtextlength;    

19                           }else if(typeof value === "number" ){    

20                             var index=thisposition();    

21                             index>value( rngmoveEnd("character",value-index)):(rngmoveStart("character",value-index))    

22                             rngselect();    

23                           }    

24                    }else{    

25                        if( value === undefined ){    

26                             return elemselectionStart;    

27                           }else if(typeof value === "number" ){    

28                             elemselectionEnd = value;    

29                             elemselectionStart = value;    

30                           }    

31                    }    

32                }else{    

33                    if( value === undefined )    

34                       return undefined;    

35                }    

36        }    

37    })

引用：>

importjavaawt;importjavaapplet;importjavaawtevent;publicclassUseTextEventextendsAppletimplementsActionListener,TextListener{TextFieldt1;TextAreat2;Panelp1;publicvoidinit(){t1=newTextField(25);t2=newTextArea(10,25);t1addActionListener(this);t1addTextListener(this);p1=newPanel(newBorderLayout());p1add(t1,BorderLayoutNORTH);p1add(t2,BorderLayoutSOUTH);add(p1);}publicvoidtextValueChanged(TextEventt){if(tgetSource()==t1){t1setText(t1getText());t1setCaretPosition(t1getText()length());//设置输入后的长度t2setText(t1getText());}}publicvoidactionPerformed(ActionEvente){if(egetSource()==t1)t2setText("");}}这个可以使光标放在文字的后面，但是光标还是会闪动，不稳定。

具体思路是

1 setCaretPos(element, pos)就是将光标设置在element元素的pos位置

2 键盘监听

a, 获取当前光标位置

b, 将当前位置后面的那个 _ 去掉(这里面要取原文本, 然后处理, 然后结果写到textarea中, 注意, 此时textarea的光标在最后位置, 所以又第三步)

c, 将光标定位到原当前位置

然后键盘输入自然会在光标的后面位置, 也就是实现了insert功能

我在firefox, ie9下测试通过, 使用了jquery去取dom元素, 如果没

首先要实现输入内容不同颜色是可以实现的，比如使用一个可编辑iframe就可以了，textarea是不行的。

至于功能的实现，我觉得不需要获取结束位置。

首先检测鼠标事件，如果有点击编辑区的某个位置，你就获取当前鼠标的落点，然后用innerHTML加入一对标签，<span class="color:#XXXXXX"></span>，所有输入内容都在这个span中间。效果就是输入的所有文字都变色。

不知道楼主明白没？

如果是 <input> <textarea> 一类输入框, 内部纯文本, 比较好模拟

我的方案是使用相同的样式, 维护一份拷贝, 取出标签的宽度即可,

复杂一些的话就在结尾加一个标签, 能从标签获取到光标的位置

windowgetSelction()getRangeAt(0)startOffset 去取位置,

sel = getSelection()

documentonclick = function(event) {

 eventpreventDefault();

 range = new Range;

 rangeselectNode(eventtarget);

 selremoveAllRanges();

 seladdRange(range)

}

documentonclick = function(event) {

 eventpreventDefault()

 consolelog(eventtargetgetClientRects()[0])

}

Selection 对应的是界面上的选中内容, 而 Range 是 Selection 当中的一个选中的区域

简单的理解是, 一个 Selection 里会有多个 Range, Range 包含起始位置结束位置等等,

起始未知需要知道在哪个节点, 偏移量是多少等等

当然还有根据 Selection 跟 Range 用上面的位置信息来 *** 作的 API

具体 *** 作的代码大概要结合 StackOverflow 上具体的用例来理解的了

简单的自己写一个比如, 选中点击位置

这个两个 API 的兼容性有一些问题, 比如 new Range 会在 Safari 保存,

比如 rangebaseNode 在 Firefox 下不存在

为了减少兼容性造成的影响, 可以用 rangy 这个模块:

>

有点答跑题了 后面回到重点 答案在 MDN 关于这两个 API 的文档当中,

在 Range 的示例当中, 有试验的新 API 来提供对应的功能

>

RangegetBoundingClientRect()

Returns a ClientRect object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by rangegetClientRects()

RangegetClientRects()

Returns a list of ClientRect objects that aggregates the results of ElementgetClientRects() for all the elements in the Range

这两个 API 就可以返回选中的 range 的像素位置了

然后按照文档的提示, 对于元素还有 getClientRects 这个 API 可以用于获取标签的像素位置:

>

The ElementgetClientRects() method returns a collection of rectangles that indicate the bounding rectangles for each box in a client

写个脚本测试一下, 确实 OK:

关于具体用例看网上的文章: >

关于浏览器兼容性可以看这里, 似乎蛮好的: >

以上就是关于js或jquery在textarea光标位置后面添加文本全部的内容，包括:js或jquery在textarea光标位置后面添加文本、java 怎么获得TextArea文本域里光标前的字符串、java后台编程怎么获取当前光标所在的位置，并输入一段指定的文本（或者说获取当前选中的文本框也行）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！