Выделение текста в элементе (сродни выделению мышью)
Ответ bobince даст вам знать, в каких случаях «высота: XX%;» будет работать или не будет работать.
Если вы хотите создать элемент с установленным отношением (высота:% от его собственной ширины), лучший способ сделать это - эффективно установить высоту с помощью padding-bottom. Пример для квадрата:
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
Квадратный контейнер будет просто состоять из заполнения, и содержимое будет расширяться, чтобы заполнить контейнер. Длинная статья 2009 года на эту тему: http://alistapart.com/article/creating-intrinsic-ratios-for-video
7 ответов
Plain Javascript
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!
Here is a working demo. For those of you looking for a jQuery plugin, I made one of those too.
jQuery (original answer)
I have found a solution for this in this thread. I was able to modify the info given and mix it with a bit of jQuery to create a totally awesome function to select the text in any element, regardless of browser:
function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
Согласно документации jQuery select () :
Запускайте событие select для каждого совпадающего элемента. Это приводит к выполнению всех функций, которые были привязаны к этому событию выбора, и вызывает действие выбора браузера по умолчанию для соответствующих элементов.
Вот ваше объяснение, почему jQuery select () в этом случае работать не будет.
Взгляните на объект Selection (движок Gecko) и объект TextRange (движок Trident). Я не знаю ни о каком JavaScript реализованы фреймворки, которые поддерживают кроссбраузерность, но я тоже никогда не искал этого, так что возможно, что даже jQuery есть.
Эта ветка содержит действительно замечательные вещи. Но я не могу сделать это прямо на этой странице с помощью FF 3.5b99 + FireBug из-за "ошибки безопасности".
Ура !! Я смог выделить всю правую боковую панель с помощью этого кода, надеюсь, это поможет вам:
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);
Код Джейсона нельзя использовать для элементов внутри 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 (честно говоря, мне все равно).
Вот версия без сниффинга браузера и без зависимости от 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);
Метод Тима отлично работает в моем случае - выбор текста в div для IE и FF после того, как я заменил следующий оператор:
range.moveToElementText(text);
следующим:
range.moveToElementText(el);
Текст в div выбирается щелчком по нему с помощью следующей функции jQuery:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});