Не получается получить выделенный текст
День добрый.Второй день мучаюсь с проблемой получения выделенного текста.В интернете очень много примеров,но...
Они либо для текстовых областей,либо если и инпут и текстареа то событие вешается на body.Вот пример ниже.Хотелось бы сделать получение при нажатии на кнопку,но все варианты сводятся сначала получить id нужного элемента textarea input и только уже потом делать что-то,а есть ли возможность сделать чтобы получение выделенного текста в текстовой области и в текстареа были одинаковые?(без получения ид) вот код(он работает)
<script type="text/javascript">
function GetSelectedText () {
var selText = "";
var daE = document.activeElement;
if (window.getSelection) { // all browsers, except IE before version 9
if (daE && (daE.tagName.toLowerCase () == "textarea" || daE.tagName.toLowerCase () == "input")) {
var text = daE.value;
selText = text.substring (daE.selectionStart, daE.selectionEnd);
}
else {
var selRange = window.getSelection ();
selText = selRange.toString ();
}
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
selText = range.text;
}
}
if (selText !== "") {
alert (selText);
}
}
function clearSelection() {
try {
// современный объект Selection
window.getSelection().removeAllRanges();
} catch (e) {
// для IE8-
document.selection.empty();
}
}
</script>
</head>
<body onmouseup="GetSelectedText ()">
Some text for selection.
<br /><br />
<textarea>Some text in a textarea element.</textarea>
<input type="text" value="Some text in an input field." size="40"/>
<br /><br />
Select some content on this page!
<input type="submit" value="Отправить" >
<input type="submit" value="Удалить" onclick="clearSelection()">
</body>
|
Начинающий-Js-кодер, насколько мне известно, для "textarea" и для "input type=text" надо обращение именно к ним для того, чтобы выбрать из них выделенные слова. Поэтому без обращения по ID, либо другим способом, но обязательно именно к определённому объекту, тут не обойдёшься.
Пожалуйста, также ставь знаки препинания, иначе трудно понять тебя. Что почитать про это:
Что касается работы с кнопкой, то это работает вот так:
<!doctype html>
<html><head><meta charset="utf-8">
<script type="text/javascript">
function GetSelectedText()
{
var selText = "";
if(window.getSelection) // all browsers, except IE before version 9
selText = window.getSelection().toString();
else if(document.selection.createRange) // Internet Explorer
selText = document.selection.createRange().text;
return selText
}
function clearSelection()
{
try
{
// современный объект Selection
window.getSelection().removeAllRanges()
}
catch (e)
{
// для IE8-
document.selection.empty()
}
}
</script>
</head><body>
Выдели какие-то слова и нажми на кнопку "Выдать выделенное". <br><br>
<input type="button" value="Выдать выделенное" onclick="alert(GetSelectedText())">
<input type="button" value="Удалить выделение" onclick="clearSelection()">
</body></html>
|
А можешь объяснить,почему если я вешаю именно onmouseup на тег body и при использовании document.activeElement обращение по id ни к textarea ни к input'у не требуется?
|
Цитата:
Начинающий-Js-кодер, onmouseup отслеживает тогда на всей странице не был ли выделены какие-то слова. И поскольку это происходит в textarea (к примеру), то при обращении к document.activeElement он знает, что это "textarea" и указывает именно на неё. Однако при нажатии на кнопку document.activeElement будет указывать на кнопку, а не на "textarea". В данном случае мы уже не будем знать откуда выбирать текст, т.к. вышеупомянутые функции не принимают во внимание "textarea" и "input type=text". Надеюсь, теперь понятно? |
да.
|
то есть получается если динамическое количество текстареа то нужно сначала получить их все,а уже потом выбрать нужный и потом уже получить от него выделение,так?
|
Цитата:
Начинающий-Js-кодер, нет, не совсем так. Ты же можешь через имя (name), через ID, через имя класса, через ссылку на объект при его создании (document.createElement ('textarea') ) всегда иметь ссылку на объект textarea и обращаться непосредственно к нему, к ним. Но если ты на самом деле не знаешь сколько их там, то тогда так как ты написал - через перебор всех. |
Цитата:
|
Dilettante_Pro,там же событие висит на верхнем тееге,а если мы повесим на кнопку то активным будет кнопка,разве нет?
|
Цитата:
|
Цитата:
Dilettante_Pro, после события onclick на кнопке document.activeElement будет ссылаться на кнопку. А если сомневаешься, то проверь сначала у себя. |
Если правильно понял...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<textarea cols="30" rows="10">bla-bla-bla</textarea>
<input type="text" value="bla-bla" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, esse architecto impedit adipisci assumenda nulla, eligendi minus ipsam optio ea iusto accusamus expedita sunt natus iste ipsum consectetur nostrum! Doloribus.</p>
<button id="btn">To get selected text</button>
<script>
var b = document.getElementById('btn');
var a = '';
b.onclick = function() {
a && alert( a );
a = '';
};
document.onmouseup = function(e) {
if (e.target.tagName.toLowerCase() == 'textarea' ||
e.target.tagName.toLowerCase() == 'input') {
a = window.getSelection().toString();
}
};
</script>
</body>
</html>
|
Decode,
Спасибо, а то я был не совсем в онлайне - не смог ответить сам |
Dilettante_Pro,
я не понимаю тогда |
Начинающий-Js-кодер,
Посмотрите пример Decode - он без всякого перебора элементов берет выделенный текст из активного элемента textarea или input. (их может быть на странице сколько угодно - текст конкретно берется из активного) Выделение, например, кнопки просто игнорируется |
| Часовой пояс GMT +3, время: 11:14. |