Форум

Начинающий-Js-кодер · #1 (**permalink**) 12.06.2016, 09:33

День добрый.Второй день мучаюсь с проблемой получения выделенного текста.В интернете очень много примеров,но...
Они либо для текстовых областей,либо если и инпут и текстареа то событие вешается на 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>

pureJS · #2 (**permalink**) 12.06.2016, 16:39

Начинающий-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>

Начинающий-Js-кодер · #3 (**permalink**) 12.06.2016, 19:36

А можешь объяснить,почему если я вешаю именно onmouseup на тег body и при использовании document.activeElement обращение по id ни к textarea ни к input'у не требуется?

pureJS · #4 (**permalink**) 12.06.2016, 19:52

Сообщение от Начинающий-Js-кодер

А можешь объяснить,почему если я вешаю именно onmouseup на тег body и при использовании document.activeElement обращение по id ни к textarea ни к input'у не требуется?

Начинающий-Js-кодер, onmouseup отслеживает тогда на всей странице не был ли выделены какие-то слова. И поскольку это происходит в textarea (к примеру), то при обращении к document.activeElement он знает, что это "textarea" и указывает именно на неё.

Однако при нажатии на кнопку document.activeElement будет указывать на кнопку, а не на "textarea". В данном случае мы уже не будем знать откуда выбирать текст, т.к. вышеупомянутые функции не принимают во внимание "textarea" и "input type=text". Надеюсь, теперь понятно?

Начинающий-Js-кодер · #5 (**permalink**) 12.06.2016, 19:57

да.

Начинающий-Js-кодер · #6 (**permalink**) 12.06.2016, 20:00

то есть получается если динамическое количество текстареа то нужно сначала получить их все,а уже потом выбрать нужный и потом уже получить от него выделение,так?

pureJS · #7 (**permalink**) 12.06.2016, 20:35

Сообщение от Начинающий-Js-кодер

то есть получается если динамическое количество текстареа то нужно сначала получить их все,а уже потом выбрать нужный и потом уже получить от него выделение,так?

Начинающий-Js-кодер, нет, не совсем так. Ты же можешь через имя (name), через ID, через имя класса, через ссылку на объект при его создании (document.createElement ('textarea') ) всегда иметь ссылку на объект textarea и обращаться непосредственно к нему, к ним. Но если ты на самом деле не знаешь сколько их там, то тогда так как ты написал - через перебор всех.

Dilettante_Pro · #8 (**permalink**) 13.06.2016, 10:11

Сообщение от pureJS

Начинающий-Js-кодер, нет, не совсем так. Ты же можешь через имя (name), через ID, через имя класса, через ссылку на объект при его создании (document.createElement ('textarea') ) всегда иметь ссылку на объект textarea и обращаться непосредственно к нему, к ним. Но если ты на самом деле не знаешь сколько их там, то тогда так как ты написал - через перебор всех.

А зачем перебор всех, если, как в примере в стартовом посте, мы имеем активный элемент и определяем, что это textarea или input?

Начинающий-Js-кодер · #9 (**permalink**) 13.06.2016, 11:43

Dilettante_Pro,там же событие висит на верхнем тееге,а если мы повесим на кнопку то активным будет кнопка,разве нет?

Dilettante_Pro · #10 (**permalink**) 13.06.2016, 22:07

Сообщение от Начинающий-Js-кодер

Dilettante_Pro,там же событие висит на верхнем тееге,а если мы повесим на кнопку то активным будет кнопка,разве нет?

И что?

Форум

Справочник

Discord чат

Курсы javascript