我正在尝试模拟HTML / JS / CSS中的文本选择,以便在真正选择文本时摆脱移动设备上的动作气泡.
更具体地说,我试图避免这种情况：
视觉：
我构建它的方式可能会因为无关紧要而改变,因为所选文本被包装在span.selection中,并且在该标记内部,还有两个插入符号用作处理程序：
Lorem ipsum dolor <!-- Unselected Text --> <span class="selection"> <!-- Start selection wrapper --> <span rel="prevIoUs" class="caret"></span> <!-- The left-side caret --> sit amet,consectetur <!-- The selected texts --> <span rel="next" class="caret"></span> <!-- The right-side caret --> </span> <!-- End selection wrapper --> adipiscing elit. <!-- Unselected Text -->
理想情况下,使用拖放选项来选择更多或更少的文本会很有趣,但我相信这样做很难做到,在这种情况下,也许可以点击插入符选择前一个或后一个单词并将其包装在.selection中并不会那么糟糕.
这是jsfiddle：http://jsfiddle.net/m6Qx4/
周围的文本也可以包含HTML标签,例如：< i>,< b>,< span>和< ul> /< li>可能存在使解析更难.
有什么想法可以做到这一点？
状态更新：
我实际上设法使它与.click();事件监听器使用我的自定义jQuery方法.
最后,我将用jQuery UI draggable替换click事件,以便选择周围的单词,只要它可用于移动设备.
我目前的错误包括红色插入符号的重新定位.我试图摧毁它们并将它们添加/追加它们仍然无法正常工作.可能是Firefox的一个错误,在对文本节点进行更改后无法正确重新加载DOM？
解决方法
我无法看到如何将所有内容包装在< span>中是一个可行的解决方案当你有这样的事情时会发生什么？
<p>The <b>important terms</b> will be bolded in this text</p>
当你选择The important时,你会有一些标签混乱,其中< span>标签的主体想要重叠< b>标签的身体.
我认为更好的解决方案是进行多项选择< span>具有相同类的标签.每次遇到HTML标记时,都会跳过标记并创建新选择< span>.然后,当您重新定位您的插入符号时,您只需执行以下操作：
$(".selection:first").prepend(startCaret);
$(".selection:last").append(endCaret);
我玩这个想法,它对我来说很好.如果你想得到真正的想象,你可以尝试合并选择< span> s,当你遇到相应的开始标记后找到一个结束标记,但这将是很多工作.
您的插入符号移动不正确,因为您指定了绝对定位样式.将其更改为亲属,并为每个插入符号提供一个& nbsp;.您将不得不使用其他一些定位CSS设置来使其看起来恰到好处,但它会随着您对这些更改的预期而移动(例如here).
当我正在为此做一些想法时,我尝试在插入符号上进行绝对定位,因此它们不必在选择范围内移动< span>.那是个错误.我遇到了没有任何标记溢出到新行的段落的问题.坚持您的选择< span>中的插入符号的想法.
最后,一些思考问题：
>你打算限制范围吗？ (即,如果您开始在< p>标记内选择,则不允许选择将该标记外部溢出到下一个< p>或其他任何内容)
>某些标签是否无法选择？ (即< table>,< script>,< select>等)
我认为这个想法非常酷,但它可能是一个非常庞大的项目.我会发布一些我试过的原型,当我让它们更加精致时.
