С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.94/18: Рейтинг темы: голосов - 18, средняя оценка - 4.94
 Аватар для Nebiros
41 / 40 / 16
Регистрация: 23.03.2010
Сообщений: 3,122

Вставка текста в фокусированное место

24.11.2017, 12:55. Показов 3899. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Я пишу что то подобное редактора и мне нужно чтобы в нужных местах я вставлял допустим смайлы, добавить в конце нет проблем, но как сделать чтобы при уже написанном тексте мне нужно вставить куда то в середину, я фокусирую туда мышку вызываю окно смайлов (уже сбивается фокус), но даже если окно открыто и фокус в нужное место наведен (то есть один клик по смайлу остался) как сделать чтобы он вписался именно туда где фокус?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
24.11.2017, 12:55
Ответы с готовыми решениями:

Вставка текста в определенное место документа, Word
Всем привет, мне нужно сделать самым простым способом вставку текста из С++ в определеннные места в Word. Желателен подробный пример. ...

Вставка текста в произвольное место в текстовом файле
Доброго времени суток! Собственно вопрос: как вставить нужный текст в произвольное место в файле *.txt? Например, в середине файла...

Вставка текста из textBox windows form в нужное место шаблона word
Здравствуйте уважаемые программисты, прошу у вас помощи, ибо перерыл кучу информации и в интернете и у вас, но не смог понять куда и что...

8
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
24.11.2017, 13:38
Если у вас подключен jQuery, вы можете расширить его следующим кодом:
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
$.fn.extend({
    getSelectedRange: function() {
        var el = this.get(0),
            start = 0,
            end = 0;
        if (el.selectionStart !== undefined) {
            start = el.selectionStart;
            end = el.selectionEnd;
        }
        return {
            start: start,
            end: end
        }
    },
    selectRange: function (start, end) {
        if (!end) end = start;
        return this.each(function () {
            if (this.setSelectionRange) {
                this.focus();
                this.setSelectionRange(start, end);
            } else if (this.createTextRange) {
                var range = this.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', start);
                range.select();
            }
        });
    }
});
Теперь вы можете вызвать методы $().getSelectedRange(), чтобы получить начало и конец выделенного текста (в случае, если выделения нет - start будет равно end и равно позиции курсора) и $().selectRange(), чтобы установить выделение или курсор в нужную позицию. Даже если элемент потеряет фокус, как в вашем случае при клике на окно смайлов, методы будут выдавать корректный ответ.
Пример: https://codepen.io/anon/pen/MOXOvg
HTML5
1
2
<textarea id="text"></textarea>
<div id="res"></div>
JavaScript
1
2
3
4
$('#text').on('keyup click focus', function(){
  var range = $(this).getSelectedRange();
  $('#res').html('Позиция курсора: начало ' + range.start + ', конец ' + range.end);
});
1
 Аватар для Nebiros
41 / 40 / 16
Регистрация: 23.03.2010
Сообщений: 3,122
24.11.2017, 13:46  [ТС]
я вот нашел способ попроще и без q, только вот узнать выделенный текст получается а теперь как его заменить?

JavaScript
1
2
3
4
area=document.getElementById('test'); sel_tx='';
if(document.selection!=undefined){ area.focus(); sel=document.selection.createRange(); sel_tx=sel.text; }
    else{ if(area.selectionStart!=undefined){ startPos=area.selectionStart; endPos=area.selectionEnd; sel_tx= area.value.substring(startPos,endPos); }}
alert(sel_tx);
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
24.11.2017, 14:01
Цитата Сообщение от Nebiros Посмотреть сообщение
как его заменить?
Ну у вас же есть позиция начала выделения и её конца. Копируете исходную строку от начала строки до начала выделения, приплюсовываете новую строку, приплюсовываете исходную строку от конца выделения до конца исходной строки, профит!
0
 Аватар для Nebiros
41 / 40 / 16
Регистрация: 23.03.2010
Сообщений: 3,122
24.11.2017, 14:06  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
Ну у вас же есть позиция начала выделения и её конца. Копируете исходную строку от начала строки до начала выделения, приплюсовываете новую строку, приплюсовываете исходную строку от конца выделения до конца исходной строки, профит!
в приведенном мною примере как было описано от туда от куда я его взял он кроссбраузерный, то есть startPos=area.selectionStart; endPos=area.selectionEnd для всех кроме ИЕ, area.focus(); sel=document.selection.createRange(); для ИЕ. Не совсем понимаю как это использовать...

Мне нужно чтобы текст "текст тест текст" при фокусе на "тест" был замен на "текст [1] текст"...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
24.11.2017, 14:20
Я же вам написал что нужно сделать...
У вас есть startPos и endPos. Находите подстроку от startPos до endPos, сравниваете её с 'тест', и если они равны, заменяете на новую строку...
0
 Аватар для Nebiros
41 / 40 / 16
Регистрация: 23.03.2010
Сообщений: 3,122
24.11.2017, 15:32  [ТС]
вот сделал так

JavaScript
1
2
3
4
5
6
7
8
9
s='[smile]';
tx=document.getElementById("test").value;
area=document.getElementById('test');
if(area.selectionStart!=undefined){
    startPos=area.selectionStart;
    endPos=area.selectionEnd;
    tx=area.value.substring(0,startPos)+s+area.value.substring(endPos);
    }
alert(tx);
да так оно работает как нужно, только в ИЕ не работает...
Если внутри теста то за место [smile] квадратик, в конце вроде ставит только не цветные смайлы, мб у ИЕ такое отображение...

Да и кстати после первого добавления смайлв например в середину фокус становится на конец строки...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
24.11.2017, 16:12
Цитата Сообщение от Nebiros Посмотреть сообщение
только в ИЕ не работает...
Для соблюдения кроссбраузерности я и предложил применить JQ.
Цитата Сообщение от Nebiros Посмотреть сообщение
фокус становится на конец строки...
При изменении значения input или textarea курсор перемещается на конец строки. Вам придётся устанавливать курсор вручную. Для этого я и предложил использовать методы выше.
0
 Аватар для Nebiros
41 / 40 / 16
Регистрация: 23.03.2010
Сообщений: 3,122
24.11.2017, 17:17  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
Для соблюдения кроссбраузерности я и предложил применить JQ.
так же само работает, мб ИЕ так некорректно отображает смайлы..

И я так не и понял, зная позицию куда нужно установить курсор, как его туда установить?
То есть я вычислил где стоит выделение, я его запомнил, после того как я изменил текст в ареа курсор стал в конец, как теперь установить его снова на запомненное раннее место?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
24.11.2017, 17:17
Помогаю со студенческими работами здесь

Вставка не в определенное место таблицы
есть запрос: mysql_query ( &quot;INSERT INTO `dle_newspost` (`id`, `autor`, `date`, `short_story`, `full_story`, `xfields`, `title`, `descr`,...

Итератор, вставка в произвольное место списка
Здравствуйте. Подскажите как вставить значение в произвольное место списка используя итератор. Эта функция должна выглядеть так: ...

Вставка информации в определенное место в документе
Все привет, есть у кого-нибудь пример кода как можно вставить информацию в определенные участки в файле? как пример будет к примеру 40...

Вставка символа на место курсора в textBox
вот есть код textBox1-&gt;Text = textBox1-&gt;Text + &quot;1&quot;; понятно что он добавляет единицу к концу бокса. изучал темы по...

Вставка элемента в определенное место списка
Добрый вечер, пишу программу на Common Lisp (defun Del (n c sp) (setq k 0) (setq z 0) (setq x 0) (dolist (el sp s) ...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru