我想让用户点击一个链接,然后它在另一个元素(不是输入)中选择HTML文本。

我所说的“选择”是指通过拖动鼠标选择文本的相同方式。这一直是一个难以研究的问题,因为每个人都在谈论“选择”或“突出”。

这可能吗?到目前为止我的代码:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JS:

function SelectText(element) {
    $("#" + element).select();
}

我是不是错过了什么显而易见的东西?


当前回答

你可以使用下面的函数来选择任何元素的内容:

jQuery.fn.selectText = function(){
    this.find('input').each(function() {
        if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
            $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
        }
        $(this).prev().html($(this).val());
    });
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

该函数的调用方式如下:

$('#selectme').selectText();

其他回答

Jason的代码不能用于iframe内的元素(因为作用域不同于window和document)。我修复了这个问题,我修改了它,以便用于任何其他jQuery插件(可链):

示例1:选择< code >标签内的所有文本,单击并添加类"selected":

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

例2:单击按钮,选择Iframe中的一个元素:

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

注意:请记住iframe源应该位于同一个域中,以防止安全错误。

jQuery插件:

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

我在IE8、Firefox、Opera、Safari和Chrome(目前的版本)中进行了测试。我不确定它是否适用于旧的IE版本(我真的不在乎)。

对于任何标签,都可以通过这段简短的代码选择标签内的所有文本。它将突出显示整个标签区域的黄色,并选择其中的文本在单一点击。

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

这个线程(死链接)包含了非常棒的东西。但由于“安全错误”,我无法在这个页面上使用FF 3.5b99 + FireBug。

Yipee ! !我能够选择整个右手边栏与这段代码,希望它能帮助你:

    var r = document.createRange();
    var w=document.getElementById("sidebar");  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 

PS:-我不能使用jquery选择器返回的对象

   var w=$("div.welovestackoverflow",$("div.sidebar"));
   
   //this throws **security exception**

   r.selectNodeContents(w);

我的特殊用例是在一个可编辑的span元素中选择一个文本范围,据我所知,这里的任何答案都没有描述。

主要的区别是你必须传递一个Text类型的节点给Range对象,就像Range. setstart()的文档中描述的那样:

如果startNode是Text, Comment或CDATASection类型的节点, 那么startOffset是从开始的字符数 startNode。对于其他Node类型,startOffset是子节点的编号 节点之间的startNode的开始。

Text节点是span元素的第一个子节点,因此要获取它,请访问span元素的childNodes[0]。其余部分与大多数其他答案相同。

下面是一个代码示例:

var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];

var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

其他相关文件: 范围 选择 Document.createRange () Window.getSelection ()

我也在寻找同样的东西,我的答案是:

$('#el-id').focus().select();