V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tianxiacangshen
V2EX  ›  jQuery

jquery 如何实现点击 p( class=‘aa’,没有 id)而选中 p 里面的文字?

  •  
  •   tianxiacangshen · 2017-06-21 14:14:28 +08:00 · 5593 次点击
    这是一个创建于 2730 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <p class="aa">v2ex</p>

    点击这个 p 之后实现 V2EX 处于选中状态
    23 条回复    2017-06-23 08:51:32 +08:00
    hwding
        1
    hwding  
       2017-06-21 14:24:17 +08:00
    var V2EX = $('.aa');

    v2ex.click(function () {
    this.focus();
    this.select();
    });
    noe132
        2
    noe132  
       2017-06-21 14:26:17 +08:00   ❤️ 1
    function SelectText(element) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
    }
    littleylv
        3
    littleylv  
       2017-06-21 14:26:41 +08:00
    @hwding #1 VM206:1 Uncaught TypeError: this.select is not a function

    据我所知,貌似无法做到
    subdued
        4
    subdued  
       2017-06-21 14:29:20 +08:00
    p 换成 input 样式调成 p 的成不成 就可以用 1 楼的方法了
    tianxiacangshen
        5
    tianxiacangshen  
    OP
       2017-06-21 14:47:19 +08:00
    @hwding 这个适用于 textarea 和 input,div p 不适用
    tianxiacangshen
        6
    tianxiacangshen  
    OP
       2017-06-21 14:48:02 +08:00
    @subdued 我这边这样实现太麻烦了,本身的样式和 js 效果就有不少了,有其他办法吗
    ajan
        7
    ajan  
       2017-06-21 15:30:02 +08:00
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    </head>
    <body>

    <p class="aa">v2ex</p>

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
    <script>
    function SelectText(element) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
    };

    $('.aa').click(function(){
    SelectText(this);
    });
    </script>
    </body>
    </html>
    ajan
        8
    ajan  
       2017-06-21 15:30:33 +08:00
    @noe132 借了你的方法
    duan602728596
        9
    duan602728596  
       2017-06-21 15:30:55 +08:00 via iPhone
    应该有办法,html5 有 api 可以做到,晚上回去查查我以前的笔记
    cowpea
        11
    cowpea  
       2017-06-21 16:43:12 +08:00
    $('.aa').click(function(){
    console.log($(this).html());
    })
    cowpea
        12
    cowpea  
       2017-06-21 16:54:33 +08:00
    啊,刚才没看到选中状态,那就
    $('p.aa').click(function(){
    $(this).trigger('select')
    })
    hzw94
        13
    hzw94  
       2017-06-21 17:06:20 +08:00
    @noe132 @ajan @yangxiongguo

    学到了,谢谢
    cowpea
        14
    cowpea  
       2017-06-21 17:15:59 +08:00
    $('p.aa').click(function(){
    var str='<input type="hidden" class="aac" value=\''+$(this).html()+'\'/>';
    $(this).after(str);
    $(".aac").select();
    })

    =-=就不信弄不出
    xycool
        15
    xycool  
       2017-06-21 18:26:00 +08:00   ❤️ 1
    tianxiacangshen
        16
    tianxiacangshen  
    OP
       2017-06-21 18:59:18 +08:00
    @hwding
    @noe132
    @littleylv
    @subdued
    @ajan
    @ajan
    @duan602728596
    @cowpea
    @hzw94
    @xycool

    xycool 的方法完美实现,不需要改变标签属性,代码少,有需要的赶紧 mark 吧
    hwding
        17
    hwding  
       2017-06-21 22:07:47 +08:00
    学习到了 哈哈
    est
        18
    est  
       2017-06-21 22:52:50 +08:00
    用 label for
    fytriht
        19
    fytriht  
       2017-06-21 23:04:33 +08:00
    function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    }

    const el = querySelector('.aa')
    el.addEventListner('click', function () {
    selectElementContents(this)
    })

    搜一下就有答案了:
    https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element
    MrFireAwayH
        20
    MrFireAwayH  
       2017-06-22 14:48:00 +08:00
    MrFireAwayH
        21
    MrFireAwayH  
       2017-06-22 14:48:35 +08:00
    @MrFireAwayH #20 没有测试过低版本浏览器 不过显而易见的是 不支持 contenteditable 的肯定无效啦
    MrFireAwayH
        22
    MrFireAwayH  
       2017-06-22 14:58:56 +08:00
    ```javascript
    $(".aa").get()[0].onclick = function(){
    document.execCommand('selectAll',false,null);
    }
    ```
    MrFireAwayH
        23
    MrFireAwayH  
       2017-06-23 08:51:32 +08:00 via Android
    难道我被降权了?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2887 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:34 · PVG 20:34 · LAX 04:34 · JFK 07:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.