今天没有找到什么问题。。就找了个别人想做的小demo,然后恬不知耻的做了下来。
光标选中的字符更改样式
哈哈,一开始听到又是懵的,好像不太可能,人家文本都是一个pre或者span里储存的,你要把他变成一个字一个span么,当然大家可能都是这么想的。。虽然想法很可笑。不过有个比较重要的思路在里面,就是利用分割来完成这一系列的操作。
对,一个标签里面的文字出现两种状态,按照我现在的能力来说,是不可能的。
所以解决的思路就是多个标签分割来制作。
先贴最开始的代码
<body>
<div id="warp">
<span>abcdefgabcdefgabcdefgabcdefg</span>
</div>
</body>
那么第一个问题来了,我们改怎么获取鼠标光标划过的内容呢。如果你去百度,百度上就会有很亲切很亲切的人告诉你,有个方法叫window.getSelection(),能够帮助你完成操作,照例我先去粘贴一下
Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象,请调用 window.getSelection()。
锚点(anchor)
锚指的是一个选区的起始点(不同于HTML中的锚点链接,译者注)。当我们使用鼠标框选一个区域的时候&#