Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.92/13: Рейтинг темы: голосов - 13, средняя оценка - 4.92
 Аватар для stashappy
42 / 42 / 13
Регистрация: 21.08.2011
Сообщений: 625

Кроссбраузерная замена выделенного текста в textarea

30.05.2013, 18:36. Показов 2399. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Вечеры добрый.

В интернете, проглядывал множество методов замены выделенного текста в textarea и ни один меня не устроил. Главная причина, это конечно же заморочки с браузером IE.
Вот одна из таких статей: http://www.snippy.ru/snippet/149/

В итоге, написал функцию сам. Может кому пригодится:

HTML форма:
HTML5
1
2
3
4
5
<form spellcheck='false'>
<div id='label'>Текстовое поле:</div><br>
<textarea id='txt' name='txt' onMouseUp='copySelection();'></textarea><br>
<div onclick='bbcode();' id='but'>GO</div>
</form>
Javascript код:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var newSel;
function copySelection() {
    if(document.activeElement.id == "txt") { // проверяем, находится ли фокус в текстовом поле
        if(document.selection.createRange().text.length > 0) {
            selText = document.selection.createRange(); // создаем объект textRange
            newSel = selText.text;
        } else {
            return false;
        }
    } else {
        return false;
    }
}
 
function bbcode() {
    var textComponent = document.getElementById('txt');
    var openTag = "<b>"; // открывающий bbcode
    var closeTag = "</b>"; // закрывающий bbcode
    // для IE
    if(document.selection != undefined) {
        if(selText.text.length > 0) {
            selText.text = openTag + newSel + closeTag;
            textComponent.focus();
            newSel = null;
        } else {
            alert("Текст не выделен");
        }
    // для Opera, Mozila, Chrome и всех остальных
    } else if(textComponent.selectionStart != undefined) {
        textComponent.focus();
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
            if(startPos != endPos) {
                sel = textComponent.value.substring(startPos, endPos);
                newSel = openTag + sel + closeTag;
                textComponent.value = textComponent.value.substr(0,startPos)+newSel+textComponent.value.substr(endPos);
            } else {
                alert("Текст не выделен");
            }
    }
}
Здесь у меня две функции. Первая функция, нужна исключительно для IE. Так как в этом браузере, при потере фокуса с текстового поля, выделение текста теряется. И в итоге, при нажатии на кнопку, функция не получает никакого выделенного текста. А значит, создание обьекта textRange() мы должны производить не по нажатию кнопки, а по наступлению события onMouseUp() в текстовом поле(пока фокус на нём еще сохраняется).
1
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
30.05.2013, 18:36
Ответы с готовыми решениями:

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

Перенос выделенного текста из тега textarea
Здравствуйте, есть такая задача: в теге textarea выделяется текст, это выделение нужно находить и вставлять в другой тег. Сейчас...

Копирование выделенного текста в HTML странице ссылкой и id значением первого выделенного абзаца
В общем так: На странице имеется длинный текст со множеством абзацами заключённые в &lt;p&gt; теги, которые имеют собственное цифровое...

2
 Аватар для stashappy
42 / 42 / 13
Регистрация: 21.08.2011
Сообщений: 625
06.06.2013, 17:07  [ТС]
Чуть не забыл. Вначале, перед обеими функциями, мы должны обязательно обьявить обьект textRange. Так:
JavaScript
1
var selText = document.selection.createRange();
0
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 3
12.01.2016, 19:15
Спасибо. Отличный код!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
12.01.2016, 19:15
Помогаю со студенческими работами здесь

Вставка текста до выделенного текста и после текста
Ребят, помогите решить задачку. Есть RichBox и в нем некий текст. Я выделил часть текста и при нажатии кнопки необходимо до начала...

Сохранить формат текста полученного из textarea и вывод этого текста
есть вот такой textarea &lt;TEXTAREA cols=&quot;96&quot; wrap=&quot;hard&quot; class=&quot;forms&quot; id=&quot;description&quot; NAME=&quot;description&quot; ...

Изменение выделенного текста
Здраствуйте уважаемые программисты. Я решил написать нечто простенького текстового редактора. Но незнаю как реализовать следующую задачу -...

Изменение выделенного текста
Нужно сделать так чтобы выделенный текст изменял свои свойства: размер,цвет,стиль. Использую c++ builder 10

обработка выделенного текста
Здравствуйте! в блоке textarea выделяешь текст, нажимаешь куда-нибудь появляется окно тан пишешь адрес ссылки, нажимаешь ок и...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru