Proprietà del testo di input DOM HTML5

Spesso, dobbiamo scoprire il valore predefinito del campo di testo. Per fare ciò, viene utilizzata la proprietà DefaultValue. La proprietà DefaultValue specifica o restituisce il valore predefinito del campo di testo. In HTML, il valore predefinito è specificato come "valore"Attributo.

Questo post dimostrerà:

• Qual è la differenza tra valore predefinito e proprietà del valore?
• Come visualizzare il valore predefinito dell'elemento di input?
• Come visualizzare il valore corrente del campo di input?

Qual è la differenza tra valore predefinito e proprietà del valore?

IL "valore" E "valore di default"Le proprietà sono diverse in modo tale che la proprietà DefaultValue contiene il valore predefinito del campo di input. Al contrario, la proprietà del valore contiene il valore corrente dopo le modifiche.

Come visualizzare il valore predefinito dell'elemento di input in HTML?

Per visualizzare il valore predefinito dell'elemento di input, il "valore di default"La proprietà viene utilizzata in JavaScript. Diamo un'occhiata a lavorare con l'aiuto di un esempio.

Esempio:
Innanzitutto, crea un elemento div con il nome della classe "contenuto"Nel file HTML. Aggiungi un altro div con il nome di classe "sotto-contenuto"All'interno di questo elemento. Quindi, includi una didascalia nel campo di testo e aggiungi un elemento associato all'attributo "per"Avere il valore"nome". All'interno di questo elemento dell'etichetta, posizionare l'elemento di input con attributi:

• tipo: Specifica il tipo di campo di input, come testo, casella di controllo, radio o altro ancora.
• id: Specifica l'ID univoco utilizzato in CSS o JavaScript per la manipolazione.
• valore: Specifica un valore e lo associa all'ID del campo di input

Poi aggiungi

elemento per aggiungere contenuti alla pagina web. Successivamente, specificare un elemento pulsante con gli attributi "tipo"Con il valore"invia" E "al clic"Attributo con il valore"ShowValue ()". Questa funzione sarà definita in JavaScript. Infine, per vedere il valore predefinito, specificare un

Elemento stile come elemento in linea. L'elemento span con l'ID "d_val"Verrà il valore predefinito:

Nome:

Clicca qui per vedere i valori

Clic

Il valore predefinito:

Ora, vai alla sezione JavaScript in cui verrà definita una funzione che contiene il "valore di default" proprietà.

JavaScript

Il nome della funzione "ShowValue ()"È seguito dalla parola chiave"funzione". All'interno di questa funzione, scriveremo un blocco di codice per specificare l'attività:

• var inputDefault: Crea una variabile "InputDefault"Utilizzo della parola chiave"var".
• documento.getElementById ("Nome").valore di default: Assegna il valore predefinito del campo di input utilizzando il "valore di default"Proprietà alla variabile creata sopra.
• Per incorporare il valore della variabile nell'elemento span HTML con l'ID D_Value, includi il codice "documento.getElementById ("D_Value").Innerhtml". Quindi, assegna il valore variabile ad esso.

La sezione successiva dimostrerà lo stile CSS.

Stile Elementi "All"

*
Margine: 0;
imbottitura: 0;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

Per modellare tutti gli elementi HTML, applica queste proprietà:

• "margine"La proprietà aggiunge spazio attorno all'elemento.
• "imbottitura"La proprietà aggiunge spazio attorno al contenuto dell'elemento o all'interno del bordo.
• "famiglia di fontLa proprietà "è impostata con i valori"Verdana, Ginevra, Tahoma, Sans-Serif". Questo elenco è fornito per garantire che se il browser non supporta il primo valore, verrà applicato un altro carattere.

Stile "contenuto" di stile

.contenuto
bordo: 1px solido #f8c4c4;
larghezza: 400px;
imbottitura: 20px;
Margine: 40px Auto;
raggio di confine: 12px;
Background-color: antiquewhite;

L'elemento div con la classe "contenuto"Viene applicato con queste proprietà CSS:

• "confine"La proprietà viene utilizzata per applicare un bordo attorno all'elemento con la larghezza del bordo, lo stile del bordo e il colore.
• "larghezza"La proprietà imposta la larghezza dell'elemento.
• "raggio di confine"La proprietà farà i bordi dell'elemento.
• "colore di sfondo"La proprietà specifica il colore di sfondo dell'elemento.

Stile "Sub-content" Div

.sub-content
larghezza: 500px;
Altezza: 150px;

Elemento "input" di stile

.input sub-content
imbottitura: 3px;
raggio di confine: 5px;
Font-size: 16px;

Il campo di input è disegnato con queste proprietà:

• "dimensione del font"La proprietà viene utilizzata per l'impostazione della dimensione del carattere dell'elemento.

Elemento "pulsante" di stile

Button
Background-color: Brown;
imbottitura: 8px 20px;
Colore: #ffffff;
bordo: 1px solido #ffd5d5;
raggio di confine: 6px;
Font-size: 14px;
Margine: 5px 100px;
box-shadow: 1px 1px 2px 1px grigio;

L'elemento pulsante è disegnato con le seguenti proprietà CSS:

• "colore"La proprietà imposta il colore del testo dell'elemento.
• "Box-Shadow"La proprietà è una proprietà stentata per aggiungere un'ombra attorno all'elemento. Specifica l'O-offset X, l'offset y, il raggio sfocato, il raggio di diffusione e il colore dell'ombra.

Modella il "pulsante" sul mouse

Button: Hover
trasformazione: traduzione (2px);
Cursore: puntatore;

In Hover, gli elementi dei pulsanti sono disegnati con queste proprietà:

• "trasformare"La proprietà viene utilizzata per la trasformazione dell'elemento. Il valore "traduzione (2px)"Trasferisce il pulsante sull'asse y.
• "cursore"Proprietà con il valore"Pointer"Cambia il cursore del mouse in una mano con un dito indicatore.

Si può osservare che il valore di input inserito nel campo è "John", Mentre il valore predefinito è"Margherita":

Come visualizzare il valore corrente del campo di input?

Per visualizzare il valore corrente/attuale del campo di input, prima, vai al file HTML. Aggiungi il

elemento associato all'attributo di stile che ha "Schermo"Proprietà con il valore"blocco input". Quindi, aggiungi un elemento span specificato con "Val" id:

Il valore corrente:

Successivamente, aggiungi il seguente codice in JavaScript:

var inptCurrent = documento.getElementById ("nome").valore;
documento.getElementById ("Val").InnerHtml = inputCurrent;

• Innanzitutto, crea una variabile "InputCurrent"Con la parola chiave"var".
• Per archiviare il valore esistente del campo di input nella variabile, specificare "documento.getElementById ("Nome").valore". Qui la proprietà del valore contiene il valore corrente del campo.
• Per incorporare il valore nell'elemento span con ID "Val"In HTML, specificare la funzione"documento.getElementById ("Val").Innerhtml". Quindi, assegna il valore di "InputCurrent"Variabile ad esso.

Come puoi vedere, il primo elemento visualizza il valore predefinito, mentre il secondo

L'elemento mostra il valore corrente:

Questo riguardava il valore dei campi di input predefiniti e di corrente.

Conclusione

IL "valore di default"La proprietà contiene il valore predefinito del campo di input. Questa proprietà viene utilizzata per impostare o restituire il valore predefinito del campo di input. In HTML, il "valore"La proprietà imposta un nuovo valore che viene inserito nel campo. Questo blog ha spiegato il text di input DOM HTML5 e la proprietà del valore con esempi appropriati.