jquery 如何实现点击 p（ class=‘aa’，没有 id）而选中 p 里面的文字？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2714 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

点击这个 p 之后实现 V2EX 处于选中状态

V2EX

class

选中

jquery

23 条回复 • 2017-06-23 08:51:32 +08:00

hwding

2017-06-21 14:24:17 +08:00

var V2EX = $('.aa');

v2ex.click(function () {
this.focus();
this.select();
});

noe132

2017-06-21 14:26:17 +08:00

function SelectText(element) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}

littleylv

2017-06-21 14:26:41 +08:00

@hwding #1 VM206:1 Uncaught TypeError: this.select is not a function

据我所知，貌似无法做到

subdued

2017-06-21 14:29:20 +08:00

p 换成 input 样式调成 p 的成不成就可以用 1 楼的方法了

tianxiacangshen

2017-06-21 14:47:19 +08:00

@hwding 这个适用于 textarea 和 input，div p 不适用

tianxiacangshen

2017-06-21 14:48:02 +08:00

@subdued 我这边这样实现太麻烦了，本身的样式和 js 效果就有不少了，有其他办法吗

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

2017-06-21 15:30:33 +08:00

@noe132 借了你的方法

duan602728596

2017-06-21 15:30:55 +08:00 via iPhone

应该有办法，html5 有 api 可以做到，晚上回去查查我以前的笔记

yangxiongguo

2017-06-21 16:37:54 +08:00

http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E9%80%89%E4%B8%AD%E3%80%81%E5%BA%93%E5%8F%8A%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/

cowpea

2017-06-21 16:43:12 +08:00

$('.aa').click(function(){
console.log($(this).html());
})

cowpea

2017-06-21 16:54:33 +08:00

啊，刚才没看到选中状态，那就
$('p.aa').click(function(){
$(this).trigger('select')
})

hzw94

2017-06-21 17:06:20 +08:00

@noe132 @ajan @yangxiongguo

学到了，谢谢

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

2017-06-21 18:26:00 +08:00

https://jsfiddle.net/gu2ksLkz/

tianxiacangshen

2017-06-21 18:59:18 +08:00

@hwding
@noe132
@littleylv
@subdued
@ajan
@ajan
@duan602728596
@cowpea
@hzw94
@xycool

xycool 的方法完美实现，不需要改变标签属性，代码少，有需要的赶紧 mark 吧

hwding

2017-06-21 22:07:47 +08:00

学习到了哈哈

est

2017-06-21 22:52:50 +08:00

用 label for

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

2017-06-22 14:48:00 +08:00

https://jsfiddle.net/d5gms4L4/

MrFireAwayH

2017-06-22 14:48:35 +08:00

@MrFireAwayH #20 没有测试过低版本浏览器不过显而易见的是不支持 contenteditable 的肯定无效啦

MrFireAwayH

2017-06-22 14:58:56 +08:00

```javascript
$(".aa").get()[0].onclick = function(){
document.execCommand('selectAll',false,null);
}
```

MrFireAwayH

2017-06-23 08:51:32 +08:00 via Android

难道我被降权了？