Как получить и установить значение входного текста в JavaScript

Kak Polucit I Ustanovit Znacenie Vhodnogo Teksta V Javascript



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

В этой статье будут продемонстрированы методы получения и установки входных текстовых значений в JavaScript.

Как получить и установить значение входного текста в JavaScript?

Чтобы получить и установить значение входного текста в JavaScript, используйте:







  • получитьэлемент по идентификатору() метод
  • получитьимяэлемента поклассу() метод
  • селектор запросов() метод

Пройдите каждый из упомянутых методов один за другим!



Метод 1: получение и установка входного текстового значения в JavaScript с использованием метода document.getElementById()

получитьэлемент по идентификатору() ” обращается к элементу с указанным идентификатором. Этот метод можно применять для доступа к идентификаторам полей ввода и кнопок для получения и установки текстового значения.



Синтаксис





документ. получитьэлементбиид ( элементы )

Здесь, ' элементы ” относится к указанному идентификатору элемента.

В приведенном ниже примере объясняется обсуждаемая концепция.



Пример
Во-первых, включите два поля типа ввода и отдельные кнопки для получения и установки значений входного текста с помощью « по щелчку ” события, которые будут получать доступ к указанным функциям:

< тип ввода знак равно 'текст' я бы знак равно 'получить текст' имя знак равно 'получить текст' по щелчку знак равно 'это.значение = ''' />
< кнопка при нажатии знак равно 'получить текст()' > Получить значение кнопка >
< кнопка при нажатии знак равно 'получить и установить текст()' > Установить значение кнопка >
< тип ввода знак равно 'текст' я бы знак равно 'установить текст' имя знак равно 'установить текст' по щелчку знак равно 'это.значение = ''' />

Затем получить значение поля ввода с помощью метода document.getElementById():

документ. получитьэлементбиид ( 'получить текст' ) . ценность знак равно 'Введите сюда' ;

Теперь объявите функцию с именем « получитьисеттекст() ». Здесь выберите поле ввода с помощью « получитьтекст id и передать входное значение в следующее поле ввода, имеющее « setText ' я бы:

функция получитьандсеттекст ( ) {
был setText знак равно документ. получитьэлементбиид ( 'получить текст' ) . ценность ;
документ. получитьэлементбиид ( 'установить текст' ) . ценность знак равно setText ;
}

Точно так же определите функцию с именем « получитьтекст() ». После этого получите поле ввода с « получитьтекст ” id и передайте конкретное значение в окно предупреждения для получения входного текстового значения:

функция получитьтекст ( ) {
был получитьтекст знак равно документ. получитьэлементбиид ( 'получить текст' ) . ценность ;
тревога ( получитьтекст ) ;
}

Выход

Метод 2: получение и установка входного текстового значения в JavaScript с использованием метода document.getElementByClassName()

получитьимяэлемента поклассу() ” обращается к элементу с помощью указанного имени класса. Этот метод аналогично можно применить для доступа к классу поля ввода и кнопок для ввода и установки текстового значения.

Синтаксис

документ. getElementsByClassName ( имя класса )

В приведенном выше синтаксисе « имя класса ” представляет имя класса элементов.

Пример
Как и в предыдущем примере, мы сначала получим доступ к первому полю ввода с помощью « получитьтекст ” имя класса. Затем определите функцию с именем « получитьисеттекст() ” и получить указанное поле ввода на основе его имени класса и установить значение в следующем поле ввода:

документ. getElementByClassName ( 'получить текст' ) . ценность знак равно 'Введите сюда' ;
функция получитьандсеттекст ( )
{
был setText знак равно документ. getElementByClassName ( 'получить текст' ) . ценность ;
документ. получитьэлементбиид ( 'установить текст' ) . ценность знак равно setText ;
}

Аналогичным образом определите функцию с именем « получитьтекст() », добавьте имя класса первого поля ввода и передайте конкретное значение в окно предупреждения, чтобы отобразить полученное значение:

функция получитьтекст ( ) {
был получитьтекст знак равно документ. getElementByClassName ( 'получить текст' ) . ценность ;
тревога ( получитьтекст ) ;
}

Эта реализация даст следующий результат:

Способ 3: получить и установить входное текстовое значение в Javascript с использованием метода «document.querySelector()»

документ.querySelector() ” извлекает первую букву e пошел вниз который соответствует указанному селектору, а метод addEventListener() может добавить обработчик события к выбранному элементу. Эти методы можно применять для получения идентификатора поля ввода и кнопок и применения к ним обработчика событий.

Синтаксис

документ. селектор запросов ( Селекторы CSS )

Здесь, ' Селекторы CSS ” относятся к одному или нескольким селекторам CSS.

Посмотрите на следующий пример.

Пример
Во-первых, включите типы ввода с их значениями-заполнителями и кнопками для получения и установки значений входного текста:

< тип ввода знак равно 'текст' я бы знак равно 'ввод-получение' заполнитель знак равно «Получить ценность» >
< идентификатор кнопки знак равно 'получить' > ПОЛУЧИТЬ кнопка >
< тип ввода знак равно 'текст' я бы знак равно 'входной набор' заполнитель знак равно «Установить значение» >
< идентификатор кнопки знак равно 'установлен' > УСТАНОВЛЕН кнопка >

Затем извлеките добавленные поля ввода и кнопки, используя « документ.querySelector() метод:

кнопка letПолучить знак равно документ. селектор запросов ( '#получить' ) ;
пусть кнопкаУстановить знак равно документ. селектор запросов ( '#установлен' ) ;
пусть getInput знак равно документ. селектор запросов ( '# ввод-получить' ) ;
пусть setInput знак равно документ. селектор запросов ( '# ввод-набор' ) ;
пусть результат знак равно документ. селектор запросов ( '#результат' ) ;

Затем включите обработчик событий с именем « нажмите » для обеих кнопок, чтобы получить и установить значения соответственно:

кнопкаПолучить. addEventListener ( 'щелкнуть' , ( ) => {
результат. внутренний текст знак равно получить ввод. ценность ;
} ) ;
кнопка Установить. addEventListener ( 'щелкнуть' , ( ) => {
получить ввод. ценность знак равно установить ввод. ценность ;
} ) ;

Выход

Мы обсудили простейшие способы получения и установки входного текстового значения в JavaScript.

Вывод

Чтобы получить и установить значение входного текста в JavaScript, используйте « документ.getElementById() метод или

document.getElementByClassName() ” для доступа к указанному полю ввода и кнопкам на основе их идентификаторов или имени класса, а затем установить их значения. Более того, « документ.querySelector() ” также можно использовать для получения и установки входных текстовых значений в JavaScript. В этом блоге объяснялись методы получения и установки входных текстовых значений в JavaScript.