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

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

24.11.2017, 12:55. Показов 3932. Ответов 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
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru