js取消textarea中的光标

具体思路是

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

2 键盘监听

a, 获取当前光标位置

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

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

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

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

如果是 <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取消textarea中的光标全部的内容，包括:js取消textarea中的光标、HTML contenteditable 标签里怎样获取光标像素位置、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！