Question

我将数据从django后端传递到我的浏览器，该后端可能包含{{ string }}空格，例如This is the sentence或H3ll0W0!rd。在进行双击时，我希望能够选择整个句子或字符串，以便可以复制它。

HTML的示例

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Book Title</th>
                <th>Book Code</th>
            </tr>
        </thead>
        <tbody>
        {% for b in books %}
            <tr>
                <td>{{ b.title }}</td>
                <td>{{ b.code}}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

Answer 1

你可以像这样使用双击监听器：

HTML：

<p id="test">Here is some text</p>

使用Javascript：

document.getElementById('test').ondblclick = function(){
    event.preventDefault();
    var sel = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    sel.removeAllRanges();
    sel.addRange(range);
};

Answer 2

我做了一个例子。要定义可以选择的文本，只需将其放在p标记内即可。看看：

jQuery的：

$(document).ready(function(){

    $('p').dblclick(function(e){

        $(this).selectText();
        // If you want, here you can also copy the text.
        e.preventDefault();

    });

});

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);
    }
};

HTML：

This is a text <p>example another one</p> bla bla bla bla <br>
Some <p>text text text</p> x x x text

Js Fiddle：

http://jsfiddle.net/mdn403wj/

这里有一个例子＆＃34;如何选择div内容文本＆＃34;。

Use jQuery select() to select contents of a div

这是你的问题吗？

javascript - 在doubleclick上选择整个字符串

2 个答案: