javascript - 单击时选择 Div 标记中的所有文本(即使用类)

标签 javascript html css onclick dom-events

网上有很多解决方案可以做到这一点,其中每个 div 标签都有一个唯一的 ID(例如:Select all DIV text with single mouse click),但是我如何才能对同一页面上的多个 div 标签执行此操作同一个类(class)?

代码看起来像这样:

<td>
    <div class="code" onclick="">int variable_name;</div>
    <div class="code" onclick="">int variable_name = value;</div>
    <div class="code" onclick="">float variable_name;</div>
    <div class="code" onclick="">float variable_name = value;</div>
    <!-- etc... -->
</td>

解决方案首选纯 Javascript。

最佳答案

你可以这样做:

 function getData(element)
{
   if (document.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>
    <head>

    </head>
    <body>
        <td>
            <div class="code" onclick="getData(this)">int variable_name;</div>
            <div class="code" onclick="getData(this)">int variable_name = value;</div>
            <div class="code" onclick="getData(this)">float variable_name;</div>
            <div class="code" onclick="getData(this)">float variable_name = value;</div>
            <!-- etc... -->
        </td>
    </body>
</html>

关于javascript - 单击时选择 Div 标记中的所有文本(即使用类),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44816729/

相关文章:

html - 如何通过 css 添加大的褪色文本背景?

javascript - 如何仅在滚动时更改div背景颜色?

javascript - SVG 元素在屏幕上不可见,可以在控制台中看到添加的元素

javascript - 如何使用 Websockets 连接到 MQTT Broker?

html - CSS 或 JS 使 select 不会向右流出屏幕

javascript - Jquery 数据表标题与正文不对齐

javascript - 如何将屏幕分成两列并让第二列中的 div 与第一列中的信息匹配?

html - 更改 chrome 和 firefox 的 file_field_tag 文本字段大小

javascript - jquery.each 在 jquery.load 之后不工作

javascript - jquery mobile 链接点击两次页面消失