В этой статье объясняются подходы к получению значения текстовой области в JavaScript.
Как получить значение текстовой области в JavaScript?
Значение текстовой области можно получить в JavaScript, используя следующие подходы:
- “ получитьэлемент по идентификатору() метод.
- “ добавить прослушиватель событий () метод.
- “ jQuery ».
Подход 1: получение значения текстовой области в JavaScript с использованием метода getElementById()
“ получитьэлемент по идентификатору() ” метод обращается к элементу с указанным “ я бы «.Этот метод может быть реализован для извлечения входного текстового поля и возврата введенного в него значения.
Синтаксис
документ. получитьэлементбиид ( элемент )
В заданном синтаксисе:
- “ элемент » относится к « я бы ” для выбора конкретного элемента.
Пример
Давайте посмотрим на следующий пример:
Давайте применим следующие шаги в приведенном ниже коде:
< h3 > Получить значение текстовой области в JavaScript h3 >
Введите что-либо : < тип ввода знак равно 'текст' я бы знак равно 'текст' заполнитель знак равно 'Введите текст...' >
< кнопка при нажатии знак равно 'значение текстовой области()' > Получить значение кнопка >
Выполните следующие шаги:
- На первом шаге укажите заявленный заголовок.
- После этого включите текстовое поле ввода с указанным « я бы ' а также ' заполнитель ' ценность.
- Кроме того, создайте кнопку с прикрепленным « по щелчку » перенаправление события на функцию textareaValue()
Давайте перейдем к части кода JavaScript:
< сценарий >функция textareaValue ( ) {
позволять получить знак равно документ. получитьэлементбиид ( 'текст' ) . ценность
тревога ( получить )
}
сценарий >
В приведенном выше коде JavaScript:
- Объявите функцию с именем « текстовое значение() ».
- В его определении получить доступ к текстовому полю ввода по его указанному идентификатору, используя « получитьэлемент по идентификатору() метод.
- Также примените « ценность ”, чтобы получить введенное текстовое значение.
- Наконец, отобразите значение текстовой области с помощью « тревога диалоговое окно.
Выход
В приведенном выше выводе видно, что введенное значение извлекается через диалоговое окно предупреждения.
Подход 2: получение значения текстовой области в JavaScript с использованием метода addEventListener()
“ добавить прослушиватель событий () ” метод используется для связывания “ мероприятие ” с элементом. Этот метод можно использовать для присоединения события к функции, чтобы значение текстовой области извлекалось при каждом вводе рядом друг с другом на консоли.
Синтаксис
элемент. addEventListener ( мероприятие , функция , исполнитель )В приведенном выше синтаксисе:
- “ мероприятие ” указывает на название события.
- “ функция ” указывает на функцию, которая будет запускаться при возникновении события.
- “ исполнитель ” — необязательный параметр.
Пример
Давайте шаг за шагом следуем приведенному ниже примеру:
< идентификатор текстовой области знак равно 'текстовая область' ряды знак равно '5' столбцы знак равно '25' заполнитель знак равно 'Введите текст...' > текстовая область >
< тип сценария знак равно 'текст/javascript' >
позволять получить знак равно документ. получитьэлементбиид ( 'txtarea' ) ;
приставка. журнал ( получить . ценность ) ;
получить . addEventListener ( 'вход' , функция textareaValue ( мероприятие ) {
приставка. журнал ( мероприятие. цель . ценность ) ;
} ) ;
сценарий >
В приведенном выше фрагменте кода:
- Укажите указанную метку. Кроме того, выделить « текстовая область ” элемент с указанным значением “ я бы ' а также ' заполнитель ”, а также настроить его размеры.
- В части кода JavaScript получите доступ к указанной текстовой области на предыдущем шаге и отобразите ее с помощью « ценность ' имущество.
- На следующем шаге прикрепите событие « текст «принесённому» текстовая область ' с использованием ' добавить прослушиватель событий () ” и примените его к функции “ текстовое значение() ». “ мероприятие ” в своем аргументе передает информацию о сработавшем событии.
- Это приведет к регистрации каждого из введенных текстовых значений рядом друг с другом.
Выход
Из приведенного выше вывода « получение ” каждого из введенных текстовых значений.
Подход 3: получение значения текстовой области в JavaScript с использованием jQuery
“ jQuery ” можно применять для доступа к текстовому полю ввода и активации его функций сразу после загрузки объектной модели документа (DOM).
Пример
Давайте последуем приведенному ниже примеру:
Введите что-либо : < тип ввода знак равно 'текст' я бы знак равно 'текст' заполнитель знак равно 'Введите текст...' >
< кнопка > Получить значение кнопка >
В приведенных выше строках кода выполните следующие шаги:
- Включите библиотеку jQuery, чтобы применить ее методы.
- Укажите « вход ' как текстовое поле с указанными значениями ' я бы ' а также ' заполнитель », как обсуждалось ранее.
- Кроме того, создайте кнопку, чтобы получить значение при нажатии кнопки.
Перейдем к части кода JavaScript:
< сценарий >$ ( документ ) . готовы ( функция ( ) {
$ ( 'кнопка' ) . нажмите ( функция ( ) {
приставка. журнал ( $ ( 'ввод: текст' ) . вал ( ) ) ;
} ) ;
} ) ;
сценарий >
Выполните указанные шаги:
- Примените « готовы() », чтобы применить дальнейшие методы к загруженному DOM.
- Получите доступ к созданной кнопке и прикрепите « щелчок() ” к нему, который выполнит указанную функцию в своем параметре.
- Метод click() получит доступ к указанному текстовому полю ввода и зарегистрирует введенное текстовое значение на консоли.
Выход
Следовательно, значение типа регистрируется на консоли.
Это были все разные способы получения значения текстовой области с помощью JavaScript.
Вывод
“ получитьэлемент по идентификатору() », метод « добавить прослушиватель событий () 'метод' или ' jQuery ” можно использовать для получения значения текстовой области в JavaScript. Метод getElementById() может быть реализован для доступа к текстовому полю ввода и отображения введенного значения текстовой области с помощью предупреждения. Метод addEventListener() можно использовать для присоединения « вход », которое будет получать текстовое значение при каждом вводе рядом. Можно применить jQuery для прямого доступа к кнопке и извлечения введенного текстового значения при нажатии кнопки на консоли. В этом руководстве объясняется, как получить значение текстовой области в JavaScript.