Jak zdobyć i ustawić wejściową wartość tekstową w JavaScript

Na większości stron internetowych konieczne jest uzyskanie wejściowej wartości tekstowej od użytkowników w celu wprowadzenia prawidłowych danych i zapewnienia bezpieczeństwa danych. Na przykład musisz uzyskać, ustawić lub przechowywać określone dane, aby użyć ich do dalszego przetwarzania. W takich przypadkach uzyskanie i ustawianie wartości tekstowej w JavaScript staje się bardzo pomocne w ochronie prywatności danych.

Ten zapis pokaże metody uzyskania i ustawienia wejściowych wartości tekstu w JavaScript.

Jak zdobyć i ustawić wejściową wartość tekstową w JavaScript?

Aby uzyskać i ustawić wejściową wartość tekstową w JavaScript, użyj:

• "getElementById ()" metoda
• "getElementByClassName ()" metoda
• "QuerySelelect ()" metoda

Przejrzyj każdą z wymienionych metod jeden po drugim!

Metoda 1: Pobierz i ustaw wartość tekstu wejściowego w JavaScript za pomocą dokumentu.metoda getelementById ()

„„getElementById ()”Metoda uzyskuje dostęp do elementu z określonym identyfikatorem. Tę metodę można zastosować, aby uzyskać dostęp do identyfikatorów pól wejściowych i przycisków w celu uzyskania i ustawiania wartości tekstowej.

Składnia

dokument.getElementById (elementId)

Tutaj, "ElementId”Odnosi się do określonego identyfikatora elementu.

Poniższy przykład wyjaśnia omówioną koncepcję.

Przykład
Po pierwsze, dołącz dwa pola typu wejściowego i oddzielne przyciski do uzyskania i ustawienia wartości tekstu wejściowego za pomocą „na kliknięcie„Zdarzenia, które będą dostępne do określonych funkcji:

Uzyskaj wartość
Ustalić wartość

Następnie uzyskaj wartość pola wejściowego za pomocą dokumentu.GetElementById () Metoda:

dokument.getElementById („getText”).wartość = "Wprowadź tutaj";

Teraz zadeklaruj funkcję o nazwie „getandsettext ()". Tutaj pobieraj pole wejściowe za pomocą „getText”ID i przekazuj wartość wejściową do następnego pola wejściowego o„Ustaw tekst" ID:

funkcja getandsettext ()
var setText = Document.getElementById („getText”).wartość;
dokument.getElementById („setText”).wartość = setText;

Podobnie zdefiniuj funkcję o nazwie „getText ()". Następnie zdobądź pole wejściowe z „getText”ID i przekazuj konkretną wartość do pola alertu, aby uzyskać wartość tekstową wejściową:

funkcja getText ()
var getText = Document.getElementById („getText”).wartość;
alert (getText);

Wyjście

Metoda 2: Pobierz i ustaw wartość tekstu wejściowego w JavaScript za pomocą dokumentu.metoda getElementBassName ()

„„getElementByClassName ()”Metoda uzyskuje dostęp do elementu za pomocą określonej nazwy klasy. Podobnie można zastosować tę metodę, aby uzyskać dostęp do klasy pola wejściowego i przycisków do wprowadzania i ustawiania wartości tekstowej.

Składnia

dokument.getElementsByClassName (klasę)

W powyższej składni „„Nazwa klasy”Reprezentuje nazwę klasy elementów.

Przykład
Podobnie jak w poprzednim przykładzie, najpierw uzyskamy pierwsze pole wejściowe za pomocą „getText" Nazwa klasy. Następnie zdefiniuj funkcję o nazwie „getandsettext ()”I uzyskaj określone pole wejściowe na podstawie jego nazwy klasy i ustaw wartość w następnym polu wejściowym:

dokument.getElementByClassName („getText”).wartość = "Wprowadź tutaj";
funkcja getandsettext ()

var setText = Document.getElementByClassName („getText”).wartość;
dokument.getElementById („setText”).wartość = setText;

Podobnie zdefiniuj funkcję o nazwie „getText ()”, Dodaj nazwę klasy pierwszego pola wejściowego i przekazaj konkretną wartość do pola alertu, aby wyświetlić pobieraną wartość:

funkcja getText ()
var getText = Document.getElementByClassName („getText”).wartość;
alert (getText);

Ta implementacja przyniesie następujące dane wyjściowe:

Metoda 3: Pobierz i ustaw wartość tekstu wejściowego w JavaScript za pomocą „Dokument.Metoda QuerySelelect () ”

„„dokument.QuerySelelect ()”Prowadzi pierwszy element, który pasuje do określonego selektora, a metoda addEventListener () może dodać obsługę zdarzeń do wybranego elementu. Metody te można zastosować, aby uzyskać identyfikator pola wejściowego i przycisków oraz zastosować do nich obsługę zdarzeń.

Składnia

dokument.querySelelector (selektory CSS)

Tutaj, "Selektory CSS”Patrz jeden lub więcej selektorów CSS.

Spójrz na poniższy przykład.

Przykład
Po pierwsze, dołącz typy wejściowe z ich wartościami zastępczymi i przyciskami do uzyskania i ustawiania wartości tekstowych:

DOSTAWAĆ

USTAWIĆ

Następnie pobieraj dodane pola wejściowe i przyciski za pomocą „dokument.QuerySelelect ()" metoda:

Niech buttonget = dokument.QuerySelelect („#get”);
Niech Buttonset = Dokument.querySelelect („#set”);
Niech getInput = dokument.querySelelect („#input-get”);
Niech setinput = dokument.querySelelect („#input-set”);
niech wynik = dokument.querySelelect („#wynik”);

Następnie dołącz obsługę zdarzeń o nazwie „Kliknij„Aby oba przyciski mogły odpowiednio uzyskać i ustawić wartości:

Butonget.addEventListener („kliknij”, () =>
wynik.innerText = getInput.wartość;
);
Buttonset.addEventListener („kliknij”, () =>
getInput.wartość = setinput.wartość;
);

Wyjście

Omówiliśmy najprostsze metody uzyskiwania i ustawiania wartości wejściowej tekstu w JavaScript.

Wniosek

Aby uzyskać i ustawić wejściową wartość tekstową w JavaScript, użyj „dokument.getElementById ()”Metoda lub

"dokument.getElementByClassName ()”Metoda dostępu do określonego pola wejściowego i przycisków na podstawie ich identyfikatorów lub nazwy klasy, a następnie ustawiania ich wartości. Co więcej, „dokument.QuerySelelect ()”Można również wykorzystać do uzyskania i ustawiania wartości wejściowych tekstu w JavaScript. Ten blog wyjaśnił metody otrzymywania i ustawiania wartości wejściowych tekstu w JavaScript.