css - Targeting::selection 在 jQuery 中用于输出？

Question

我正在查看 http://jsfiddle.net/duhTB/ ，它使用 CSS 来定位::selection。

现在，我要做的有点不同。请耐心等待。

这是代码:http://jsfiddle.net/Ywq2x/15/ .我试图做到这一点，以便当我突出显示输入到#id_input-id'd 文本区域的文本并按 ctrl+b 时，突出显示的文本将输出到#id_selected-id'd 预 block 。

如果您发现我使用的代码有任何问题，能否指出并告诉我如何解决这些问题？如果 jQuery 无法实现我想做的事情，您能解释一下原因吗？如果还有其他方法，您能解释一下吗？

谢谢。

为了方便和持久的力量，我还将在此处发布有问题的代码:

JS/jquery

$(document).ready(function(e) {
    $("#id_input").keypress(function(e) {
        if(e.keyCode == 66 && e.ctrlKey) {    
            var val = $("#id_input::selection").val();
            $("#id_selected").text(val);
        }
    });
});

HTML:

<p>A1:</p>
<textarea rows="2" cols="30" class="txt_input_area dotted" id="id_input">
</textarea>
<div class="now_working">
  <pre id="id_selected"></pre>
</div>

Answer 1

::selected 选择器在 jQuery 中似乎不起作用，但好消息是有一个 jquery-textrange plugin由 dwieeb 提供，用于从输入字段和文本区域中获取选定的文本。

试试这个:

$(function() {
    $("#id_input").on('keydown', function(e) {
        if (e.keyCode == 66 && e.ctrlKey) {
            e.preventDefault();//inhibit opening Opera's sidebar
        }
    }).on('keyup', function(e) {
        if (e.keyCode == 66 && e.ctrlKey) {
            var txt = $("#id_input").textrange('get', 'text');
            $("#id_output").text(txt);
        }
    });
});

工作 DEMO

郑重声明，这些是 jquery-textrange 的全部功能:

• ('get', 'position'): 光标在文本字段中的位置
• ('get', 'start'): 所选文本在文本字段中的起始位置
• ('get', 'end'): 所选文本在文本域中的结束位置
• ('get', 'length'): 文本域中选中文本的长度
• ('get', 'text'): 选中的文本
• ('set'): 选择字段中的所有文本
• ('set', n):选择从第n个字符到文本末尾
• ('set', n, length):从第n个字符开始，选取length个字符(或到文本末尾)
• ('set', n, 0): 等同于 ('setcursor', n)
• ('setcursor', n): 将光标设置到文本字段中的指定位置
• ('replace', 'some text'): 替换选中的文本，或者在光标位置插入。

2014 年 2 月 28 日修订以反射(reflect)插件的最新状态

感谢 dwieeb 提供的插件，它消除了网络编程中最令人作呕的方面 - 文本范围。