HTML5 DOM Wejście Wejścia Tekst DEFALAULTValue Propert

Często musimy znaleźć domyślną wartość pola tekstowego. Aby to zrobić, wykorzystywana jest właściwość wartości domyślnej. Właściwość DefaultValue określa lub zwraca wartość domyślną pola tekstowego. W HTML wartość domyślna jest określona jako „wartość" atrybut.

Ten post będzie pokazał:

• Jaka jest różnica między właściwościami wartości domyślnej a właściwościami wartości?
• Jak wyświetlić domyślną wartość elementu wejściowego?
• Jak wyświetlić bieżącą wartość pola wejściowego?

Jaka jest różnica między właściwościami wartości domyślnej a właściwościami wartości?

„„wartość" I "domyślna wartość„Właściwości są różne w taki sposób, że właściwość wartości domyślnej utrzymuje wartość domyślną pola wejściowego. Natomiast właściwość wartości utrzymuje bieżącą wartość po zmianach.

Jak wyświetlić domyślną wartość elementu wejściowego w HTML?

Aby wyświetlić domyślną wartość elementu wejściowego, „domyślna wartość„Własność jest używana w JavaScript. Sprawdźmy, żeby działa z pomocą przykładu.

Przykład:
Najpierw utwórz element DIV z nazwą klasy „treść”W pliku HTML. Dodaj kolejny div z nazwą klasy „sub-kontakt„Wewnątrz tego elementu. Następnie dołącz podpis do pola tekstowego i dodaj element powiązany z atrybutem „Do„Posiadanie wartości”nazwa". Wewnątrz tego elementu etykiety umieść element wejściowy o atrybutach:

• typ: Określa typ pola wejściowego, taki jak tekst, pole wyboru, radio lub więcej.
• ID: Określa unikalny identyfikator wykorzystywany w CSS lub JavaScript do manipulacji.
• wartość: Określa wartość i kojarzy ją z identyfikatorem pola wejściowego

Następnie dodaj

element do dodania treści do strony internetowej. Następnie określ element przycisku z atrybutami „typ”Z wartością„składać" I "na kliknięcie”Atrybut z wartością„ShowValue ()". Ta funkcja zostanie zdefiniowana w JavaScript. Wreszcie, aby zobaczyć wartość domyślną, określ

element stylizowany jako element blokowy. Element rozpiętości z identyfikatorem „d_val”Wyświetli wartość domyślną:

Nazwa:

Kliknij tutaj, aby zobaczyć wartości

Kliknij

Wartość domyślna:

Teraz przejdź do sekcji JavaScript, w której zostanie zdefiniowana funkcja, która zawiera „domyślna wartość" nieruchomość.

JavaScript

Nazwa funkcji „ShowValue ()”Następnie jest słowo kluczowe„funkcjonować". Wewnątrz tej funkcji napiszemy blok kodu, aby określić zadanie:

• var inputDefault: Utwórz zmienną ”InputDefault”Korzystanie z słowa kluczowego„var".
• dokument.getElementById („Nazwa”).domyślna wartość: Przypisz domyślną wartość pola wejściowego, wykorzystując „domyślna wartość„Właściwość do zmiennej utworzonej powyżej.
• Aby osadzić wartość zmiennej w elemencie HTML Span z ID D_Value, dołącz kod „dokument.getElementById („D_Value”).InnerHtml". Następnie przypisz do niego wartość zmienną.

Następna podana sekcja pokaże styl CSS.

Styl „wszystkie” elementy

*
Margines: 0;
Wyściółka: 0;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

Aby stylizować wszystkie elementy HTML, zastosuj te właściwości:

• "margines„Właściwość dodaje przestrzeń wokół elementu.
• "wyściółka„Właściwość dodaje przestrzeń wokół zawartości elementu lub wewnątrz granicy.
• "rodzina czcionek„Właściwość jest ustawiona z wartościami”Verdana, Genewa, Tahoma, Sans-Serif". Ta lista jest dostarczana, aby upewnić się, że jeśli przeglądarka nie obsługuje pierwszej wartości, zostanie zastosowana kolejna czcionka.

Styl „treść” div

.treść
granica: 1px solid #f8c4c4;
szerokość: 400px;
Wyściółka: 20px;
Margines: 40px Auto;
RADIUS BERDER: 12PX;
kolor tła: antykwewhite;

Element div z klasą „treść”Jest stosowany z tymi właściwościami CSS:

• "granica„Nieruchomość jest wykorzystywana do nakładania granicy wokół elementu o szerokości granicy, stylu granicznym i kolorze.
• "szerokość„Właściwość ustawia szerokość elementu.
• "Radiusz graniczny„Właściwość sprawi, że krawędzie elementu okrągłe.
• "kolor tła„Właściwość określa kolor tła elementu.

Styl „sub-content” div

.sub-content
szerokość: 500px;
Wysokość: 150px;

Element stylu „wejściowy”

.sub-kontaktowe wejście
Wyściółka: 3px;
RADIUS BERDER: 5px;
Rozmiar czcionki: 16px;

Pole wejściowe jest stylizowane z tymi właściwościami:

• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawienia rozmiaru czcionki elementu.

Element „guzika” stylu

przycisk
kolor tła: Brown;
Wyściółka: 8px 20px;
Kolor: #ffffff;
granica: 1px solid #ffd5d5;
RADIUS BRAVES: 6px;
Rozmiar czcionki: 14px;
Margines: 5px 100px;
Box-shadow: 1px 1px 2px 1px Gray;

Element przycisku jest stylizowany z następującymi właściwościami CSS:

• "kolor”Właściwość ustawia kolor tekstu elementu.
• "Shadow Box„Własność jest właściwością skrótów, aby dodać cień wokół elementu. Określa X-offset, Y-Offset, promień rozmycia, promień rozprzestrzeniania się i kolor cienia.

Styl „przycisk” na zawisie

Przycisk: Hover
Transform: Translatey (2px);
Kursor: wskaźnik;

Na zawisie elementy przycisków są stylizowane z tymi właściwościami:

• "przekształcać„Własność jest wykorzystywana do transformacji elementu. Wartość "tłumaczenie (2px)„Przenosi przycisk na osi y.
• "kursor„Własność o wartości”wskaźnik”Zmienia kursor myszy na rękę z palcem wskazującym.

Można zauważyć, że wartość wejściowa wprowadzona w polu wynosi „Jan”, Podczas gdy wartość domyślna to„Stokrotka”:

Jak wyświetlić bieżącą wartość pola wejściowego?

Aby wyświetlić bieżącą/bieżącą wartość pola wejściowego, najpierw przejdź do pliku HTML. Dodaj

element powiązany z atrybutem stylu mającym „wyświetlacz„Własność o wartości”blok wejściowy". Następnie dodaj element rozpiętości określony za pomocą „val" ID:

Bieżąca wartość:

Następnie dodaj następujący kod w JavaScript:

var inputcurrent = dokument.getElementById („Nazwa”).wartość;
dokument.getElementById („val”).innerHtml = inputCurrent;

• Najpierw utwórz zmienną „Wprowadzony prąd”Z słowem kluczowym„var".
• Aby przechowywać istniejącą wartość pola wejściowego w zmiennej, określ „dokument.getElementById („Nazwa”).wartość". Tutaj właściwość wartości zawiera bieżącą wartość pola.
• Aby osadzić wartość w element rozpiętości o identyfikatorze „val”W HTML określ funkcję„dokument.getElementById („val”).InnerHtml". Następnie przypisz wartość „Wprowadzony prąd„Zmienna do tego.

Jak widać, pierwszy element wyświetla wartość domyślną, podczas gdy drugi

Element pokazuje bieżącą wartość:

To chodziło o wartość domyślną i bieżącą pól wejściowych.

Wniosek

„„domyślna wartość„Właściwość zawiera wartość domyślną pola wejściowego. Ta właściwość jest wykorzystywana do ustawiania lub zwrócenia wartości domyślnej pola wejściowego. W HTML „The”wartość„Właściwość ustawia nową wartość wprowadzoną do pola. Ten blog wyjaśnił wartość niewydolności HTML5 DOD, a właściwość wartości z odpowiednimi przykładami.