Как получить значение текстовой области в JavaScript?

Kak Polucit Znacenie Tekstovoj Oblasti V Javascript



В процессе разработки адаптивных веб-страниц или сайтов необходимо подсказывать пользователю введенные данные, чтобы обеспечить правильность введенных данных. Например, подтверждение набранных писем и паролей. В другом случае запись ошибки или предупреждения о выбранном параметре может привести к серьезным последствиям, например вирусу и т. д. В таких сценариях получение значения текстовой области в JavaScript очень полезно для обеспечения конфиденциальности данных.

В этой статье объясняются подходы к получению значения текстовой области в 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).

Пример
Давайте последуем приведенному ниже примеру:

< источник сценария знак равно 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' > сценарий >
Введите что-либо : < тип ввода знак равно 'текст' я бы знак равно 'текст' заполнитель знак равно 'Введите текст...' >
< кнопка > Получить значение кнопка >

В приведенных выше строках кода выполните следующие шаги:

  • Включите библиотеку jQuery, чтобы применить ее методы.
  • Укажите « вход ' как текстовое поле с указанными значениями ' я бы ' а также ' заполнитель », как обсуждалось ранее.
  • Кроме того, создайте кнопку, чтобы получить значение при нажатии кнопки.

Перейдем к части кода JavaScript:

< сценарий >
$ ( документ ) . готовы ( функция ( ) {
$ ( 'кнопка' ) . нажмите ( функция ( ) {
приставка. журнал ( $ ( 'ввод: текст' ) . вал ( ) ) ;
} ) ;
} ) ;
сценарий >

Выполните указанные шаги:

  • Примените « готовы() », чтобы применить дальнейшие методы к загруженному DOM.
  • Получите доступ к созданной кнопке и прикрепите « щелчок() ” к нему, который выполнит указанную функцию в своем параметре.
  • Метод click() получит доступ к указанному текстовому полю ввода и зарегистрирует введенное текстовое значение на консоли.

Выход

Следовательно, значение типа регистрируется на консоли.

Это были все разные способы получения значения текстовой области с помощью JavaScript.

Вывод

получитьэлемент по идентификатору() », метод « добавить прослушиватель событий () 'метод' или ' jQuery ” можно использовать для получения значения текстовой области в JavaScript. Метод getElementById() может быть реализован для доступа к текстовому полю ввода и отображения введенного значения текстовой области с помощью предупреждения. Метод addEventListener() можно использовать для присоединения « вход », которое будет получать текстовое значение при каждом вводе рядом. Можно применить jQuery для прямого доступа к кнопке и извлечения введенного текстового значения при нажатии кнопки на консоли. В этом руководстве объясняется, как получить значение текстовой области в JavaScript.