У меня есть страница с большим количеством текстовых полей. Когда кто-то нажимает на ссылку, я хочу, чтобы слово или два были вставлены там, где находится курсор, или добавлены в текстовое поле с фокусом.
Например, если курсор / фокус находится в текстовом поле «apple», и он нажимает ссылку «[email]», затем я хочу, чтобы текстовое поле говорило «apple bob@example.com».
Как я могу это сделать? Возможно ли это, так как, если фокус находится на элементе radio / dropdown / non textbox? Можно ли запомнить последнее сосредоточенное на текстовом поле?
13 ответов
Используйте это, из здесь :
Как вставить некоторый текст в текущую позицию курсора TextBox через JQuery и JavaScript
- Найти текущую позицию курсора
- Получить текст, который нужно скопировать
- Установите текст там
- Обновить положение курсора
Здесь у меня есть 2 текстовых блока и кнопка. Я должен нажать на определенную позицию в текстовом поле, а затем нажать кнопку, чтобы вставить текст из другого текстового поля в позицию предыдущего текстового поля.
Основная проблема заключается в том, что получение текущего курсора где мы вставим текст.
вы можете только сфокусировать требуемое текстовое поле и вставить туда текст. нет способа узнать, где фокус AFAIK (возможно, взаимодействие со всеми узлами DOM?).
проверить этот стековый поток — у него есть решение для вас: Как узнать, какой элемент DOM имеет фокус?
Код выше не работал для меня в IE. Вот какой код на основе этого ответа .
Я достал getElementById , чтобы я мог ссылаться на элемент по-другому.
EDIT: Добавлен исполняемый фрагмент, jQuery не используется.
Я думаю, вы могли бы использовать следующий JavaScript для отслеживания текстового поля с последним фокусом:
Предыдущее решение (реквизит для gclaghorn) использует textarea и вычисляет положение курсора, так что это может быть лучше для того, что вы хотите. С другой стороны, этот был бы более легким, если это то, что вы ищете.
Содержимое Редактируемый, HTML или любой другой элемент DOM. Выбор
Если вы пытаетесь вставить в карете на
Мне очень повезло с использованием библиотеки Rangy:
У этого есть тонна замечательных функций, таких как:
- Сохранить позицию или выбор
- Затем позже Восстановить позицию или выбор
- Получить выделение HTML или Plaintext
- Среди многих других
Онлайн-демо не работало последнее, что я проверил, однако у репо есть рабочие демонстрации. Чтобы начать работу, просто загрузите Repo из Git или NPM, затем откройте ./rangy/demos/index.html
. Это делает работу с позицией post и текстом легким!
Утвержденный ответ Джорджа Клагхорна отлично подойдет для простого вставки текста в позицию курсора. Если пользователь выделил текст, и вы хотите, чтобы этот текст был заменен (по умолчанию используется большинство текста), вам нужно внести небольшое изменение при установке переменной «назад».
Кроме того, если вам не нужно поддерживать более старые версии IE, современные версии поддерживают textarea.selectionStart, поэтому вы можете удалить все обнаружение браузера и код, специфичный для IE.
Вот упрощенная версия, которая работает для Chrome и IE11 по крайней мере, и обрабатывает замену выделенного текста.
Этот плагин jQuery дает вам готовый способ выбора / каттинга.
Принятый ответ не работал для меня в Internet Explorer 9. Я проверил его и обнаружение браузера работало неправильно, оно обнаружило ff (firefox), когда я был в Internet Explorer.
I просто это изменение:
В результате получился следующий код:
с помощью ответа @quick_sliv:
Добавление текста в текущую позицию курсора включает в себя два шага:
- Добавление текста в текущую позицию курсора
- Обновление текущей позиции курсора
Протестировано в Chrome 48, Firefox 45, IE 11 и Edge 25
Содержание
Textarea — немного об этом HTML объекте
Стоит отметить, что до последнего момента недолюбливал, а теперь можно смело сказать недооценивал этот HTML объект. На самом деле объект довольно мощный. Теперь я его использую куда чаще, чем тот же input. Сам по себе конечно объект слабоват, но в связке с javascript становится куда мощнее, чем input из-за своего многострочного преимущества и неограниченной возможности ввода кода. Хотел бы отметить тот факт, что после замены в большинстве случаев объекта input на textarea у меня на сайтах стало куда меньше банальных орфографических ошибок, так как браузеры в основной своей массе подсвечивают орфографические ошибки только в объекте textarea, а не input.
Просто постоянно работая с этим объектом, устал постоянно искать четкие скрипты, комментарии по частым проблемам. А приходится тупо бродить по тупо скопированным с одними и тем же ошибками в скриптах, поэтому решил в первую очередь сделать для себя подробный help для работы с объектом textarea, да за одним и поделиться с такими же страждущими знаний в этой области.
Но обо всем по порядку.
Как вставить теги в тексте textarea?
Вызывается все это хозяйство очень простым вешанием функции на любое событие, например onclick:
Подробнее можно посмотреть рабочий пример по ссылке.
Textarea — как вставить текст туда, где сейчас курсор?
Подробнее можно посмотреть рабочий пример по ссылке.
Как перемещать курсор внутри textarea?
Подробнее можно посмотреть рабочий пример по ссылке.
Как определить позицию курсора в textarea?
Подробнее можно посмотреть рабочий пример по ссылке.
Дополнительная информация по теме
В javascript нет функции установки значений по умолчанию, поэтому используем этот костыль
Статья о том, что представляет собой форма по управлению балансами у пользователя в программном комплексе SD 3000
Подробное описание управление множеством компьютеров со стороны сервера программного комплекса SD 3000
Статья с примером и рекомендациями, как эффективно оформлять javascript функции при программировании
Можете воспользоваться следующей функцией:
Поддерживаются обычные поля ввода и textarea. Правда, эта функция работает с DOM напрямую, а расширяет jQuery только для удобства использования. (При необходимости можно переписать как отдельную функцию для чистого JavaScript).