Come modificare la lunghezza di un campo di immissione per l'unità di misura

December 25

Come modificare la lunghezza di un campo di immissione per l'unità di misura


Uno degli aspetti più interessanti dei linguaggi lato client come JavaScript è che permettono agli sviluppatori Web di codificare le pagine che rispondono immediatamente interazione con l'utente senza la necessità di un round trip al server Web. In passato, pagine HTML erano statiche o eseguito in remoto. Se gli utenti necessaria per accedere alle informazioni, che sono state costrette a vivere con tutto ciò che gli attributi sono stati originariamente progettati dallo sviluppatore o attendere la risposta dal server. Utilizzando codice dinamico, gli sviluppatori Web possono cambiare le interfacce utente in tempo reale in base all'input dell'utente e fornire più robuste esperienze utente.

istruzione

1 Aprire un programma di editing di testo e creare un nuovo file chiamato "changeInput.html."

2 Aggiungere alcuni tag HTML di base per "changeInput.html". Questi tag compongono una pagina HTML molto di base.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>

3 Aggiungere due HTML "<input>" tag a changeInput.html tra il file del "<body>" e "</ body>" tag. Assegnare ad ogni "<input>" TAG un "tipo" valore di attributo "radio" e un "nome" valore di attributo "misura". Aggiungere il testo "Feet" per completare il pulsante prima radio e il testo "pollici" per completare la seconda pulsante di scelta:
<input type = "radio" name = "misura"> Piedi
<input type = "radio" name = "misura"> Pollici

4 Aggiungere un "<input>" tag HTML changeInput.html dopo i due pulsanti di opzione. Assegnare il tag "<input>" un "tipo" "text", valore di attributo una "dimensione" valore di attributo "1" ed un "id" valore "inputField" come segue:
<Input type = "text" size = "1" id = "inputField">

5 Inserire due delimitatori JavaScript ( "<script>" e "</ script>") tra changeInput.html di "<head>" e "</ head>" tag. Assegnare il "<script>" tag aperto un "tipo" valore "text / javascript". Qualsiasi testo inserito tra il "<script>" e "</ script>" delimitatori verrà interpretato come JavaScript dal browser Web:
<Script type = "text / javascript">
</ Script>

6 Dichiarare una funzione JavaScript denominata "changeInputLength" in changeInput.html. Posizionare la funzione tra il JavaScript open ( "<script>") e vicino ( "</ script>") tag. La funzione "changeInputLength" prende un argomento: la lunghezza a cui il campo di input dovrebbe cambiare quando l'utente seleziona un pulsante di scelta di misura, come ad esempio "Feet" o "pollici". Luogo due parentesi graffe dopo la dichiarazione di funzione per indicare dove la funzione del codice di posizione:
Funzione changeInputLength (lunghezza)
{
}

7 Utilizzare il metodo JavaScript "getElementById" per modificare la lunghezza del campo di input "inputField". Per modificare la lunghezza del campo, impostare l'attributo "larghezza" stile al valore passato alla funzione "changeInputLength" quando l'utente seleziona uno dei campi di input:
. Document.getElementById ( 'inputField') style.width = lunghezza;

8 Modificare ciascuno dei pulsanti etichette radio e utilizzare un "onclick ()" evento JavaScript per chiamare la funzione changeInputLength. Passare il valore di "lunghezza" "12" per il pulsante di opzione "piedi" e passare il valore di "lunghezza" "16" per il pulsante di opzione "pollici". Salvare e chiudere changeInput.html. Dopo il punto 8, changeInput.html apparirà come illustrato di seguito:
<Html>
<Head>
<Script type = "text / javascript">
Funzione changeInputLength (lunghezza)
{
. Document.getElementById ( 'inputField') style.width = lunghezza;
}
</ Script>
</ Head>
<Body>
<Input type = "radio" name = "misura" onclick = "changeInputLength ('12 ')"> Piedi
<Input type = "radio" name = "misura" onclick = "changeInputLength ('16 ')"> Pollici
<Input type = "text" size = "1" id = "inputField">
</ Body>
</ Html>

9 Aprire changeInput.html in un browser Web abilitato JavaScript. Fare clic su ogni pulsante e verificare che i cambiamenti di lunghezza del campo di input basati su l'unità di misura.

Consigli e avvertenze

  • lunghezze di campo di input possono essere modificate utilizzando linguaggi di scripting lato server come PHP o Perl. Mentre questo metodo rende l'unità di misura a disposizione script lato server, richiede un aggiornamento della pagina per modificare la lunghezza del campo di input nell'interfaccia utente.
  • Quasi ogni attributo di stile HTML disponibili può essere modificato in modo dinamico con il metodo JavaScript "getElementById".
  • Molti eventi possono essere utilizzati per attivare i cambiamenti elemento dell'interfaccia utente dinamiche, tra cui onBlur, onLoad e onMouseOver.
  • Diverse applicazioni Web possono richiedere unità alternative di misura. Le specifiche esatte per quanto lunghezze d'ingresso dovrebbe cambiare sono la decisione dello sviluppatore.
  • larghezza dei campi di input possono essere modificate utilizzando il CSS proprietà "larghezza".
  • "Size" e "larghezza" cambiamenti non possono essere coerenti in tutti i browser. Assicuratevi di controllare il risultato in più di un browser Web, soprattutto se gli altri componenti dell'interfaccia utente impatti del cambiamento.