一次单击即可选择所有DIV文本

2020/11/17 07:22 · javascript ·  · 0评论

当用户单击DIV时,如何突出显示/选择DIV标签的内容...这个想法是所有文本都被突出显示/选择,因此用户不需要用鼠标手动突出显示文本,并且可能错过了一点文字?

例如,假设我们有一个DIV,如下所示:

<div id="selectable">http://example.com/page.htm</div>

...并且当用户单击该URL中的任何URL时,整个URL文本将突出显示,以便他们可以轻松地在浏览器中四处拖动所选文本,或单击鼠标右键复制完整的URL。

谢谢!

function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

现在,您必须将ID作为参数传递,在这种情况下该ID是“可选的”,但它更具全局性,允许您多次在任何地方使用它,而不必像chiborg所提到的那样使用jQuery。

2017年更新:

要选择节点的内容调用:

window.getSelection().selectAllChildren(
    document.getElementById(id)
);

这适用于所有现代浏览器,包括IE9 +(在标准模式下)。

可运行的示例:

function select(id) {
  window.getSelection()
    .selectAllChildren(
      document.getElementById("target-div") 
    );
}
#outer-div  { padding: 1rem; background-color: #fff0f0; }
#target-div { padding: 1rem; background-color: #f0fff0; }
button      { margin: 1rem; }
<div id="outer-div">
  <div id="target-div">
    Some content for the 
    <br>Target DIV
  </div>
</div>

<button onclick="select(id);">Click to SELECT Contents of #target-div</button>

由于已弃用,因此以下原始答案window.getSelection().addRange(range); 已过时

原始答案:

以上所有示例均使用:

    var range = document.createRange();
    range.selectNode( ... );

但问题在于它会选择包含DIV标签等的节点本身。

要根据OP问题选择节点的文本,您需要调用:

    range.selectNodeContents( ... )

因此完整的代码段将是:

    function selectText( containerid ) {

        var node = document.getElementById( containerid );

        if ( document.selection ) {
            var range = document.body.createTextRange();
            range.moveToElementText( node  );
            range.select();
        } else if ( window.getSelection ) {
            var range = document.createRange();
            range.selectNodeContents( node );
            window.getSelection().removeAllRanges();
            window.getSelection().addRange( range );
        }
    }

有纯CSS4解决方案:

.selectable{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */

}

user-select是CSS模块4级规范,目前是草稿和非标准CSS属性,但浏览器很好地支持它-请参阅#search = user-select

.selectable{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */

}
<div class="selectable">
click and all this will be selected
</div>

在MDN上阅读更多有关用户选择的内容在w3scools中进行操作

Neuroxik的答案确实很有帮助。我在使用Chrome时仅遇到了麻烦,因为当我单击外部div时,它不起作用。我可以解决,在添加新范围之前删除旧范围:

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection()) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

对于内容可编辑的内容(不是常规输入),您需要使用selectNodeContents(而不仅仅是selectNode)。

注意:所有对“ document.selection”和“ createTextRange()”的引用均适用于IE 8及更低版本。。。

function selectElemText(elem) {

    //Create a range (a range is a like the selection but invisible)
    var range = document.createRange();

    // Select the entire contents of the element
    range.selectNodeContents(elem);

    // Don't select, just positioning caret:
    // In front 
    // range.collapse();
    // Behind:
    // range.collapse(false);

    // Get the selection object
    var selection = window.getSelection();

    // Remove any current selections
    selection.removeAllRanges();

    // Make the range you have just created the visible selection
    selection.addRange(range);

}

使用文本区域字段,您可以使用此字段:(通过Google)

<form name="select_all">

    <textarea name="text_area" rows="10" cols="80" 
    onClick="javascript:this.form.text_area.focus();this.form.text_area.select();">

    Text Goes Here 

    </textarea>
</form>

这就是我看到大多数网站这样做的方式。他们只是使用CSS设置样式,因此看起来好像不是文本区域。

该代码片段提供了您所需的功能您需要做的是在该div中添加一个事件,该事件将在其中激活fnSelect。您完全不应该这样做并且可能不起作用的快速hack看起来像这样:

document.getElementById("selectable").onclick(function(){
    fnSelect("selectable");
});

显然假设已包含链接到代码段。

我发现将这个功能包装为jQuery插件很有用:

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

因此,它成为可重用的解决方案。然后,您可以执行以下操作:

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

它将在div中选择测试。

这个简单的解决方案怎么样?:)

<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">

当然,这不是像您提到的div-construction,但仍然对我有用。

Niko Lay:这个简单的解决方案怎么样?:)

`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`

.....

之前的代码:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">

之后的代码:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">

仅此部分onclick =“ this.select();” 我的代码中的id =“ selectable”工作正常。一键选择我的代码框中的所有内容。

感谢您的帮助Niko Lay!

通过将css属性的user-select设置为all可以轻松实现。像这样:

div.anyClass {
  user-select: all;
}
$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

上述答案在Chrome中不起作用,因为addRange删除了之前添加的范围。除了使用CSS进行伪选择外,我没有找到任何解决方案。

本文地址:http://javascript.askforanswer.com/yicidanjijikexuanzesuoyoudivwenben.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!