Javascript 如何在单击时选择跨度的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11451353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select the text of a span on click?
提问by MrVimes
I am looking for a way to select the text inside a span using jquery when the text is clicked on.
我正在寻找一种在单击文本时使用 jquery 选择跨度内文本的方法。
For example in the html snippet below, I want the text "\apples\oranges\pears" to become selected when it is clicked on.
例如，在下面的 html 片段中，我希望文本“\apples\oranges\pears”在单击时被选中。
<p>Fruit <span class="unc_path">\apples\oranges\pears</span></p>
I've tried implementing this myself to no avail.
我试过自己实现这个无济于事。
采纳答案by Denys Séguret
A working demonstration : http://jsfiddle.net/dystroy/V97DJ/
一个工作演示：http: //jsfiddle.net/dystroy/V97DJ/
$('.unc_path').click(function (){
var text = $(this).text();
var $input = $('<input type=text>');
$input.prop('value', text);
$input.insertAfter($(this));
$input.focus();
$input.select();
$(this).hide();
});?
The idea (see comment above) is to dynamically replace the span with an input, only cross-browser way I know to have selected text.
这个想法（见上面的评论）是用输入动态替换跨度，我知道只有跨浏览器的方式来选择文本。
Note that this is only half the road, as you probably want to deselect, style to remove border, etc.
请注意，这只是道路的一半，因为您可能想要取消选择、删除边框的样式等。
And I must also precise that an input, contrary to a span, cannot span on multiple lines.
而且我还必须明确指出，与跨度相反，输入不能跨多行。
I don't think this could/should be used in a real application except in a very specific point.
我不认为这可以/不应该在实际应用程序中使用，除非在非常具体的点上。
EDIT: new version : http://jsfiddle.net/dystroy/A5ZEZ/
编辑：新版本：http: //jsfiddle.net/dystroy/A5ZEZ/
In this version the text comes back to normal when focus is lost.
在此版本中，当失去焦点时，文本会恢复正常。
$('.unc_path').click(function (){
var text = $(this).text();
var $this = $(this);
var $input = $('<input type=text>');
$input.prop('value', text);
$input.insertAfter($(this));
$input.focus();
$input.select();
$this.hide();
$input.focusout(function(){
$this.show();
$input.remove();
});
});?
回答by Eugene Manuilov
It could be implemented with native JavaScript. A working demonstration on jsFiddle. Your code could be like this:
它可以用原生 JavaScript 实现。关于jsFiddle的工作演示。你的代码可能是这样的：
$('.unc_path').click(function (){
var range, selection;
if (window.getSelection && document.createRange) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.selection && document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(this);
range.select();
}
});
回答by Blair Anderson
You can use CSS to do this more easily than JS with style="user-select: all;"
您可以使用 CSS 比使用 JS 更容易地做到这一点 style="user-select: all;"
add cursor: pointer;so its obvious they can click...
添加cursor: pointer;所以很明显他们可以点击...
See code snippet:
见代码片段：
<p>
Fruit
<span style="user-select: all; cursor: pointer;">\apples\oranges\pears</span>
</p>回答by HariHaran
To select the specific Span you need a id to be provided to that span. Else you need to loop through the list of all available span to get it.
要选择特定的跨度，您需要为该跨度提供一个 id。否则，您需要遍历所有可用跨度的列表以获取它。
Lets take this as Example (have added id attribute)
让我们以此为例（已添加 id 属性）
<p>Fruit <span class="unc_path" id="span1">\apples\oranges\pears</span></p>
The JQuery will be like this
JQuery 将是这样的
$('span1').text() // if you want to take the text
$('span1').html() // if you want to take the html
