Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/55: Рейтинг темы: голосов - 55, средняя оценка - 4.80
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
1

Выделение фрагмента текста в textarea

28.02.2013, 15:55. Просмотров 10641. Ответов 18
Метки нет (Все метки)


Как это возможно сделать?

Вот как я делал выделение текста в теге, но такой не канает на текстовые поля:

HTML5
1
<div id="ex6">blabal</div>

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function gg() {
    
    var target = document.getElementById('ex6');
    var rng, sel;
    
    if ( document.createRange ) {
        rng = document.createRange();
        textNode = target.firstChild;
        
        rng.selectNode( target );
        
        rng.setStart( textNode, 0 );
        rng.setEnd( textNode, 3 );
        
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange( rng );
        
    } 
    else {
        var rng = document.body.createTextRange();
        rng.moveToElementText( target );
        rng.select();
    }
}

HTML5
1
<input onclick="gg()" type="button" value="Выделить">
Добавлено через 1 минуту
Нужно выделить к примерку красное: "опупенный супер гладиатор"
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.02.2013, 15:55
Ответы с готовыми решениями:

Выделение части текста в textarea
Такая задача: есть текстовое поле &lt;textarea&gt; и в нем некоторый текст. Нужно получить выделенную...

Выделение фрагмента строки и создание новой на основе этого фрагмента
У меня есть переменная var a = 'file:///D:/папка/myfile.jpg' Мне нужно выделить из переменной a...

Вставка текста в textarea
Нужно чтобы value в textarea принимал html код, а в textarea отображался текст. Подскажите как...

Замена выделенного текста в TEXTAREA
Привет всем! Подскажите, пожалуйста, как в textarea можно заменить выделенный текст? Например,...

18
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
28.02.2013, 19:11 2
Средствами html, css, javascript невозможно сделать выделение цветом в части textarea и прочих полях ввода (только целиком).
Можно эмулировать подобное поведение, испольуя вместо этого div с contenteditable="true", как сейчас и делают все онлайн-редакторы..
0
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
28.02.2013, 19:38  [ТС] 3
Цитата Сообщение от sKotenok Посмотреть сообщение
Средствами html, css, javascript невозможно сделать выделение цветом в части textarea и прочих полях ввода (только целиком).
Можно эмулировать подобное поведение, испольуя вместо этого div с contenteditable="true", как сейчас и делают все онлайн-редакторы..
выделение цветом? Мне просто выделение нужно, это возможно. К примеру в редакторе булке при форматировании текста, выделенный текст остаеться.
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
28.02.2013, 19:56 4
Тогда, наверное подойдет вот это (про IE забыть):
Javascript
1
2
3
4
5
6
7
8
9
function selectFromTo (textInputId, i1, i2) { 
   textInput = document.getElementById (textInputId);
   if (textInput && textInput.createTextRange) { 
     var range = textInput.createTextRange(); 
     range.moveStart('character', i1); 
     range.moveEnd('character', i2); 
     range.select(); 
   } 
}
1
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
28.02.2013, 22:47  [ТС] 5
Цитата Сообщение от sKotenok Посмотреть сообщение
Тогда, наверное подойдет вот это (про IE забыть):
Javascript
1
2
3
4
5
6
7
8
9
function selectFromTo (textInputId, i1, i2) { 
   textInput = document.getElementById (textInputId);
   if (textInput && textInput.createTextRange) { 
     var range = textInput.createTextRange(); 
     range.moveStart('character', i1); 
     range.moveEnd('character', i2); 
     range.select(); 
   } 
}
не работает, ничего не происходит, ошибок тоже нет.

Добавлено через 1 минуту
Цитата Сообщение от sKotenok Посмотреть сообщение
огда, наверное подойдет вот это (про IE забыть):
это как раз под ИЕ и подходит, но не на др браузеры

Добавлено через 1 минуту
И то работает не совсем корректно, 1 значение верно, а 2е до конца выделяет.

Тобиш вот так: 1,2 : blabal

Добавлено через 10 минут
а понял, 2е значение минусовое должно быть. А как на ост браузерах то?
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
28.02.2013, 22:52 6
Немного повозившись, сделал кроссбраузерную функцию (проверил в Opera12, последнем FF, IE9):
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function selectFromTo( textInput, i1, i2) {
    if ( textInput.selectionStart ) {
        textInput.setSelectionRange(i1,i2);
        textInput.focus();
    } else if ( textInput.createTextRange) {
        var range = textInput.createTextRange();
        range.moveStart('character', i1);
        range.moveEnd('character', i2);
        range.select();
    } else {
        alert( "I can't do this!" );
    }
}
Зря в IE9 проверял, он selectionStart поддерживает. К сожалению IE8 под рукой нету..
1
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
01.03.2013, 00:27  [ТС] 7
В хроме не катит, алерт выдает(( чтож такое то.

Добавлено через 1 минуту
И в ИЕ тоже... версия 9-10, ну короче та которая стоит на вин8, не проверял, не помню.

Добавлено через 3 минуты
А ты забыл строку:

Javascript
1
textInput = document.getElementById(textInputId);
В ИЕ пашет, но в хроме нет. И в опере тоже

Добавлено через 4 минуты
Цитата Сообщение от sKotenok Посмотреть сообщение
textInput.setSelectionRange(i1,i2);
* * * * textInput.focus();
Не понимаю почему тут фокус. когда по логике должен быть селект? Но не то и другое не подходит.
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
01.03.2013, 00:29 8
Хмм.. В chromium проверил, полет нормальный. В win8 должон быть IE10, странно, если в нем не работает.
focus() нужен, чтобы поле ввода точно заимело фокус (я на отдельный button событие вешал) - можно закоментить эту строку.

Не, строку я не забыл, просто вынес её за пределы функции.
0
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
01.03.2013, 00:45  [ТС] 9
Цитата Сообщение от sKotenok Посмотреть сообщение
Хмм.. В chromium проверил, полет нормальный. В win8 должон быть IE10, странно, если в нем не работает.
В ИЕ работает, я же написал, просто ты строку пропустил, а я сразу не заметил.

Добавлено через 11 минут
блин почему так, что делать?
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
01.03.2013, 00:49 10
Да, действительно, один момент не учел ^_^..
Держи поправленный скрипт (не работало, когда textInput.selectionStart == 0):
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function selectFromTo( textInput, i1, i2 ) {
    if ( typeof textInput.selectionStart != 'undefined' ) {
        textInput.setSelectionRange(i1, i2);
        textInput.focus();
    } else if ( textInput.createTextRange) {
        var range = textInput.createTextRange();
        range.moveStart('character', i1);
        range.moveEnd('character', i2);
        range.select();
    } else {
        alert( "I can't do this!" );
    }
}
document.addEventListener('DOMContentLoaded', function() {
    textInput = document.getElementById( 'my_input' );
        var select_button = document.getElementById( 'select_button' ),
        v1 = document.getElementById( 'v1' ),
        v2 = document.getElementById( 'v2' );
    select_button.addEventListener('click', function() {
        selectFromTo( textInput, v1.value, v2.value );
    }); 
});
И тестовая страничка:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html><head></head>
<body>
<form>
    <input id="my_input" type="text" value="Протестируем ка элемент ввода текста" size="60"/>
    <br/>
    Хочу выделить текст!
    <br/>
    Начать с <input id="v1" type="text" value="5"/>
     И до <input id="v2" type="text" value="10" />
    <input id="select_button" type="button" value="Выделить"/>
</form>
</body>
</html
1
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
01.03.2013, 01:00  [ТС] 11
А почему просто как вызов не работает:

Javascript
1
selectFromTo( 'ex7', 10, 11 );
Добавлено через 1 минуту
ой туплю чето я, забыл ссылку на идентификатор

Javascript
1
2
var textInput = document.getElementById('ex7');
selectFromTo( textInput, 10, 11 );
Добавлено через 45 секунд
Большое спасибо!
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
01.03.2013, 01:20 12
Ну и я поправил скрипт, в плане кроссбраузерности, проверьте кто-нибудь в IE (сижу в линуксе, нету под рукой)
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
function selectFromTo( textInput, i1, i2 ) {
    if ( textInput.createTextRange) {
        var range = textInput.createTextRange();
        range.moveStart('character', i1);
        range.moveEnd('character', i2);
        range.select();
    } else if ( typeof textInput.selectionStart !== 'undefined' ) {
        textInput.setSelectionRange(i1, i2);
        textInput.focus();
    } else {
        alert( "I can't do this!" );
    }
}
 
var eventListener = document.addEventListener ? 'addEventListener' : 'attachEvent';
document[eventListener]('DOMContentLoaded', function() {
    var textInput = document.getElementById( 'my_input' ),
        selectButton = document.getElementById( 'select_button' ),
        v1 = document.getElementById( 'v1' ),
        v2 = document.getElementById( 'v2' );
    selectButton[eventListener]('click', function() {
        selectFromTo( textInput, v1.value, v2.value );
    });
});
</script>
0
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
01.03.2013, 11:17  [ТС] 13
Цитата Сообщение от sKotenok Посмотреть сообщение
Ну и я поправил скрипт, в плане кроссбраузерности, проверьте кто-нибудь в IE (сижу в линуксе, нету под рукой)
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
function selectFromTo( textInput, i1, i2 ) {
    if ( textInput.createTextRange) {
        var range = textInput.createTextRange();
        range.moveStart('character', i1);
        range.moveEnd('character', i2);
        range.select();
    } else if ( typeof textInput.selectionStart !== 'undefined' ) {
        textInput.setSelectionRange(i1, i2);
        textInput.focus();
    } else {
        alert( "I can't do this!" );
    }
}
 
var eventListener = document.addEventListener ? 'addEventListener' : 'attachEvent';
document[eventListener]('DOMContentLoaded', function() {
    var textInput = document.getElementById( 'my_input' ),
        selectButton = document.getElementById( 'select_button' ),
        v1 = document.getElementById( 'v1' ),
        v2 = document.getElementById( 'v2' );
    selectButton[eventListener]('click', function() {
        selectFromTo( textInput, v1.value, v2.value );
    });
});
</script>
а в чем отличие? ты поменял местами условия? Но в Ие теперь косяк появился, до этого норм было. Теперь конечный курсор всегда на конец становится в ИЕ.

Добавлено через 23 секунды
Мб потому-что он пытается по 1му условию выполниться, а для него оно не корректно...

Добавлено через 9 часов 9 минут
Не могу понять еще одну мелоч, как сделать так, чтобы фокус был постоянно на textarea. То есть, когда я нажимаю на кнопочку, чтобы фокус не прыгал между кнопкой и текстПолем, точнее у меня не кнопка, а div.

Добавлено через 32 минуты
А все разобрался, это уже другая тема...
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
01.03.2013, 13:04 14
Joker555,
Для того и поставил, чтобы IE пользовался своей веткой и можно было для него отдельно отладить.
Ещё на строке
Javascript
1
if ( typeof textInput.selectionStart !== 'undefined' )
старые IE могут запнуться, т.к. метода selectionStart нет, а я пытаюсь с ним какие-то действия делать, но вариант
Javascript
1
if ( textInput.selectionStart )
выдает 0 в Cromium и функция не работает..
0
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
01.03.2013, 16:38  [ТС] 15
Можно еще так проверку поставить:

Javascript
1
2
3
4
5
if (navigator.userAgent.indexOf('MSIE') != -1)
 
if (navigator.userAgent.indexOf('Firefox') != -1)
 
...
Добавлено через 39 секунд
Версию думаю тоже можно спарсить... не смотрел, но знаю 100%, могу и сделать
0
363 / 334 / 38
Регистрация: 29.03.2011
Сообщений: 838
01.03.2013, 17:10 16
Joker555, Так делать не стоит - скажем, в 9 IE добавили поддержку selectionStart, а в 11м могут вообще убрать legacy и код с createTextRange работать откажется. В других браузерах такие вещи обычно быстрее меняются, поэтому лучше проверять непосредственно доступность метода, а не версию браузера..

Если уж делать код действительно кроссбраузерным, то можно сразу взять jQuery/Prototype/{your favorite library} и оформить функцию как небольшое расширение..

В данном случае проблема с тем, что selectionStart возвращает undefined для window или document, но работает для элементов input или textarea. Но мне как-то лень сейчас проверять все варианты, если допилишь, выкладывай ^_^..
0
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 364
01.03.2013, 18:59  [ТС] 17
Цитата Сообщение от sKotenok Посмотреть сообщение
Так делать не стоит
я думал об этом =) Это уже от безисходности


Цитата Сообщение от sKotenok Посмотреть сообщение
Но мне как-то лень сейчас проверять все варианты, если допилишь, выкладывай ^_^..
твой работает во всех браузерах, проверял. На версии IE < 9 мне уже наплевать как-то)) Да и кстати можно сделать совместимость с определенной версией в ИЕ))
0
0 / 0 / 0
Регистрация: 23.02.2013
Сообщений: 24
29.09.2014, 11:27 18
Подскажите а можно ли выделять по строчкам? Допустим нажал на кнопку и выделилось несколько определенных строчек?
0
81 / 4 / 2
Регистрация: 29.04.2015
Сообщений: 117
09.07.2017, 19:58 19
Как вы все любите трудности, у меня вот так все выделяется и в IE и в опере
TEXTA1 Это textarea

Javascript
1
2
3
Form1.TEXTA1.focus()
Form1.TEXTA1.selectionStart = Х  
    Form1.TEXTA1.selectionEnd = Y
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.07.2017, 19:58

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

В textarea нет первоначального текста
Доброго времени суток. document.all(&quot;&quot;+formname+&quot;&quot;).innerHTML = '&lt;form method=post...

Кроссбраузерная замена выделенного текста в textarea
Вечеры добрый. В интернете, проглядывал множество методов замены выделенного текста в textarea и...

Как изменить значение регистра текста в textarea?
Задача: поменять значение регистра текста в textareа. То есть привести все к одному регистру.

Можно ли в textarea вставить кусок текста в позицию курсора?
Здраствуйте! Можно ли в textarea вставить кусок текста в позицию курсора? (в середину, в начало...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.