Creare e modificare un form con jQuery

Molte form sono abbastanza semplici e non del tutto comprensibili, vediamo come rimediare questa situazione. In questo tutorial vedimo come posimo migliorare un form utilizzando classi CSS e valori di default, che variano a seconda dello stato del input del form.

Il nostro obietivo modificare un campo del form con jQuery

Vedimo come fare  un modulo con il campo di input  per l'inserimento di testo, che cambia il suo aspetto al posizionamento del puntatore dentro, cio e  quando entra nello stato focus. Cominciamo.
jformex

Passo №1 - Preparazione

In primo luogo abbiamo bisogno di preparare un form .

<form>
<input name="status" id="status" value="Inserisci il tuo parere" type="text"/>
<input value="Submit" type="submit"/>
</form>

Ho introdotto il "Inserisci il tuo parere" come valore di default per campo. Questo sara il testo che verrà visualizzato nel input del form, ma che scompare al posizionamento del putatore dentro in questo campo.

Passo №2 – stili CSS

Ora facciamo il nostro form bello. Qui posimo dare lo spazio alla nostra fantasia, ma dovremo creare due classi per i stati di input  attivo \ inattivo. Per questo ho creato due stili diversi  assegnati a classi con i nomi  e idleField e focusField

<style type="text/css">
#status{
width:50%;
padding:10px;
outline:none;
height:36px;
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:#EEE;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
</style>

Passo №3 - jQuery

Questa fase di lavoro aggiungerà al vostro  form l'effetto che avevamo nel mirino dal inizio quando il campo sarà in focus eliminare suggerimento per questo campo . Abbiamo bisogno di raggiungere 2 risultati:

1) Il campo selezionato dovrebbe passare dallo stato  inattivo a uno stato attivo, e deve cambiareil suo aspetto con i nostri classi CSS che abimo creato sopra ;

2) Il testo predefinito ( "Inserisci il tuo parere") dovrebbe scomparire. Vogliamo anche che campo esce dal focus (diventa inattivo) se ci spostiamo su qualche altro elemento della pagina

$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value == '')){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});

Diamo uno sguardo più da vicino ad ogni parte del codice jQuery:

Per la prima cosa per ogni campo di input applicare la classe idleField

$('input[type="text"]').addClass("idleField");

Quando l'input entra in focus rimuovere lo stile per lo stato inattivo e aggiungere per quello attivo.

$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
});

Quando l'utente fa clic dentro l'input , vogliamo che il testo "Inserisci il tuo parere" scompare.
Il  codice che segue controlla l'input di testo con il testo di default. Se il testo è lo stesso, lo script lo rimuove dal campo.

if (this.value == this.defaultValue){
this.value = '';
}

Se l'utente ha gia digitato qualcosa il suo testo non viene rimosso, ma viene evidenziato. Di questo è responsabile codice:

if(this.value != this.defaultValue){
this.select();
}

Il codice seguente descrive le regole su quello che dovrebbe accadere quando l'utente lascia l'input  e va avanti per la pagina web

$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});

Vale la pena prestare l'attenzione all'utilizzo di $ .trim (). Questa funzione rimuove spazi prima e dopo il testo inserito dall'utente. Tenete presente che, se l'utente non inseriche niente nel input, e lascia il testo predefinito, anche in questa situazione il contenuto del campo d'input sara comunque ellaborato dal interprete. È possibile risolvere questo problema utilizzando uno script di verifica di complicazione del campo quando si fa clic su "Invia".
Non dimentichiamo di collegare la libreria di jQuery come descritto qui

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Altrimenti il nostro script non funzionerà

Ed ecco il risultato del lavoro di oggi!

Letto 758 volte