Как вставить в input текст через js

Как можно вставить текст в поле?

В Jquery можно сделать так $(‘#cardNumber-input’).val(‘Значение поля’);
Если использовать чистый JavaScript, то так: document.querySelector(‘#cardNumber-input’).value = ‘Значение’;
Либо так: document.getElementById(‘cardNumber-input’).value = ‘Значение’;
Читайте про управление DOM элементами

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Как инклюдить файлы js?

• 1 подписчик
• 7 часов назад
• 51 просмотр

Вставка текста в текстовое поле (input) по клику

А мне нужно, чтобы была возможность вставки нескольких слов через запятую (например -Автор1, Автор4).

В javascript не разбираюсь — прошу помочь доработать эту функцию.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Вставка текста в текстовое поле
Как вставить текст в htmlInputText в то место, где стоит курсор. Спасибо.

Вывод текста в текстовое поле по двойному клику
По двойному клику на текстовом поле выводить туда текст Недавно начал разбираться, думаю, что так.

Автоматическая вставка текста в поле Input
Всем привет! Прошу помощи у специалистов. Есть сторонний сайт, где нужно каждый час вводить в.

Автоматическая вставка текста в поле Input на стороннем сайте
Здравствуйте Камрады. Хочу сделать программу которая будет автоматически вводить числа в поля для.

как сделать input в js

Для создания input с помощью JavaScript можно использовать метод createElement для создания элемента input , а затем добавить его в DOM.

Пример создания input с типом «text»:

const input = document.createElement('input'); input.type = 'text'; document.body.append(input); 

В этом примере мы создали элемент input , задали ему тип «text» и добавили его на страницу с помощью метода append .

Можем задавать и другие атрибуты для элемента input , такие как name , value , placeholder и т.д. Например, чтобы добавить атрибут name :

const input = document.createElement('input'); input.type = 'text'; input.name = 'myInput'; document.body.append(input); 

Как и для других элементов DOM-дерева, для данного input мы можем добавить обработчик события:

const input = document.createElement('input'); input.type = 'text'; input.addEventListener('input', (event) =>  console.log(event.target.value); >); document.body.append(input); 

Как вставить в input текст через js

Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ) и кнопка с изображением ( image ). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

Атрибуты

accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. accesskey Переход к элементу с помощью комбинации клавиш. align Определяет выравнивание изображения. alt Альтернативный текст для кнопки с изображением. autocomplete Включает или отключает автозаполнение. autofocus Устанавливает фокус в поле формы. border Толщина рамки вокруг изображения. checked Предварительно активированный переключатель или флажок. disabled Блокирует доступ и изменение элемента. form Связывает поле с формой по её идентификатору. formaction Определяет адрес обработчика формы. formenctype Устанавливает способ кодирования данных формы при их отправке на сервер. formmethod Сообщает браузеру каким методом следует передавать данные формы на сервер. formnovalidate Отменяет встроенную проверку данных на корректность. formtarget Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. list Указывает на список вариантов, которые можно выбирать при вводе текста. max Верхнее значение для ввода числа или даты. maxlength Максимальное количество символов разрешенных в тексте. min Нижнее значение для ввода числа или даты. multiple Позволяет загрузить несколько файлов одновременно. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. pattern Устанавливает шаблон ввода. placeholder Выводит подсказывающий текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. size Ширина текстового поля. src Адрес графического файла для поля с изображением. step Шаг приращения для числовых полей. tabindex Определяет порядок перехода между элементами с помощью клавиши Tab. type Сообщает браузеру, к какому типу относится элемент формы. value Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx6

       
Ваше имя: 
Каким браузером в основном пользуетесь:  Internet Explorer  Opera  Firefox 
Комментарий 

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

Статьи по теме

• Адрес электронной почты
• Блокирование элементов форм
• Ввод чисел
• Веб-адрес
• Выбор цвета
• Загрузка файлов
• Защита от дурака
• Календарь
• Кнопки
• Однострочное текстовое поле
• Отправка данных формы
• Переключатели
• Подсказывающий текст
• Поле для пароля
• Поле для поиска
• Поле для телефона
• Поле с изображением
• Ползунок
• Проверка технологий HTML5
• Скрытое поле
• Сумасшедшие формы
• Флажки
• Шаблон ввода данных