我希望让用户单击一个链接,然后在另一个元素(不是输入)中选择HTML文本.
通过"选择",我的意思与通过将鼠标拖过它来选择文本的方式相同.这是一个研究的熊,因为每个人都在谈论其他术语中的"选择"或"突出".
这可能吗？我的代码到目前为止:
HTML:
Select Code
Some Code here
JS:
function SelectText(element) {
$("#" + element).select();
}
我错过了一些明显的东西吗？
function selectText(node) {
node = document.getElementById(node);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else {
console.warn("Could not select text in node: Unsupported browser.");
}
}
const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));Some text goes here!
Moar text!
Click me!
这是一个没有浏览器嗅探并且不依赖于jQuery的版本:
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
Jason的代码不能用于iframe中的元素(因为范围与窗口和文档不同).我修复了这个问题并修改了它,以便用作任何其他jQuery插件(可链接):
示例1:单击选择标记内的所有文本并添加"selected"类:
$(function() {
$("code").click(function() {
$(this).selText().addClass("selected");
});
});
示例2:单击按钮,选择Iframe中的元素:
$(function() {
$("button").click(function() {
$("iframe").contents().find("#selectme").selText();
});
});
注意:请记住,iframe源应驻留在同一个域中以防止出现安全性错误.
jQuery插件:
jQuery.fn.selText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
}
我在IE8,Firefox,Opera,Safari,Chrome(当前版本)中进行了测试.我不确定它是否适用于较旧的IE版本(真诚的我不在乎).
这个主题非常精彩.但由于"安全错误",我无法使用FF 3.5b99 + FireBug在此页面上正确执行此操作.
Yipee!我可以用这段代码选择整个右侧边栏,希望它可以帮助你:
var r = document.createRange();
var w=document.getElementById("sidebar");
r.selectNodeContents(w);
var sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
PS: - 我无法使用jquery选择器返回的对象
var w=$("div.welovestackoverflow",$("div.sidebar"));
//this throws **security exception**
r.selectNodeContents(w);
我正在寻找相同的东西,我的解决方案是这样的:
$('#el-id').focus().select();
您可以使用以下函数选择任何元素的内容:
jQuery.fn.selectText = function(){
this.find('input').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
$('').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);
}
};
可以按如下方式调用此函数:
$('#selectme').selectText();
京公网安备 11010802040832号 | 京ICP备19059560号-6 