在jQuery中定位::选择输出?

时间:2012-12-27 01:03:11

标签: css jquery-selectors jquery

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

现在,我想要做的是有点不同。忍受我。

以下是代码:http://jsfiddle.net/Ywq2x/15/。我正在尝试这样做,以便当我突出显示我已输入#id_input-id'd文本区域的文本并按ctrl + b时,突出显示的文本将输出到#id_selected-id'd前块。< / p>

如果您看到我正在使用的代码有任何问题,请您指出并让我知道如何纠正这些问题?如果我想用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>

1 个答案:

答案 0 :(得分:3)

::selected选择器似乎不适用于jQuery,但好消息是dwieeb有一个jquery-textrange plugin用于从输入字段和textareas中提取所选文本。

试试这个:

$(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日修订,以反映插件的最新状态

感谢dwieeb提供了一个插件,可以解决网络编程中最令人作呕的问题 - 文本范围。