Javascript per completamento text input

**ferdinandobassi** · 13-12-2011, 20:13

Ciao,
sto usando il seguente codice per ottenere un campo di input text che mi "autocompleti" le date che digito, aggiungendo il carattere / come separatore di una data in formato gg/mm/aaaa.
In precedenza utilizzavo un normalissimo datepicker con un calendario, ma il cliente **esige** questa soluzione.
Il codice seguente funziona, ma ha un problema: funziona solo se immetto le cifre digitandole dalla tastiera "principale". Se invece utilizzo il tastierino numerico (con il NUM LOCK correttamente attivo) si imballa tutto.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Pagina Test</title>
  <script type="text/javascript">

function isNumber(event){
    var unicode = event.charCode? event.charCode : event.keyCode
    var c = String.fromCharCode( event.charCode ? event.charCode : event.keyCode ); 
    return ( ("0123456789").indexOf(c) != -1 );
}


function isBackSpace(e){
    var unicode = e.charCode? e.charCode : e.keyCode
    return (unicode == 8);
}

function checkCharacter(object, event)
{
    if (isBackSpace(event) || isNumber(event))
    {
        var c = String.fromCharCode( event.charCode ? event.charCode : event.keyCode );

        object.value = object.value + c;
        return true;
    }
    return false;
    

}

function formatHour( object, event ) {
    var validate = (isBackSpace(event) || isNumber(event));
    var value=object.value;
    
    if (validate)
    {
        var c = String.fromCharCode( event.charCode ? event.charCode : event.keyCode );
        if (value.length==2)
        {
            object.value = value + ":";
        }
        else if (value.length==5)
        {
            document.getElementById("value2").focus();
        }
        
        
    }
    else
    {
        object.value = value.substr (0, value.length-1);
    }
    return validate;
}

function formatTime( object, event ) {
    var validate = isBackSpace(event) || isNumber(event) ;
    var value=object.value;
    if (validate)
    {
        var c = String.fromCharCode( event.charCode ? event.charCode : event.keyCode );
        if (value.length==2)
        {
            object.value = value + "/";
        }
        else if (value.length==5)
        {
            object.value = value + "/";
        }
        else if (value.length>10)
        {
            alert ("La data va inserita nella forma gg/mm/aaaa");
        }
        
    }
    else
    {
        object.value = value.substr (0, value.length-1);
    }

    return validate;
}</script>
</head>

<body>
<span>Time:</span><input type="text" id="value1" name="value1" maxlength="5"
value="" onkeyup=" return formatHour( this, event ); ">

<span>Date:</span><input type="text" id="value2" name="value2" maxlength="10"
value="" onkeyup=" return formatTime(this, event);">

</body>
</html>

Mi è stato suggerito che potrebbe essere un problema di codifica, ma non so come affrontarlo...
Ho provato con un paio di portatili e un paio di PC fissi, sistemi Windows XP, Linux Debian e Windows 7 e il comportamento è identico in tutti i casi.

Vi ringrazio per tutti i possibili suggerimenti.

Ferdinando

**Vindav** · 13-12-2011, 21:32

codice:

function isNumber(event){
    var unicode = event.charCode? event.charCode : event.keyCode
    var c = String.fromCharCode( event.charCode ? event.charCode : event.keyCode ); 
    return ( ("0123456789").indexOf(c) != -1 || (unicode >=96 && unicode <= 105));
}

**ferdinandobassi** · 13-12-2011, 21:39

Ovviamente funziona alla grande.
Sono un pollo.

Grazie mille.
Ferdinando

**ferdinandobassi** · 28-12-2011, 14:48

Ciao,
riapro la discussione perchè volevo introdurre una miglioria nello script.
Attualmente, infatti, l'unico controllo che viene fatto è che siano effettivamente digitati dei numeri, ma è perfettamente possibile inserire una data del tipo:

35/35/2011

senza che lo script si lamenti.

Ritenete semplice inserire un controllo di validità sulla data o è bene che non ci perda tempo?
In caso, qualcuno potrebbe indicarmi qualche suggerimento?

Grazie,
Ferdinando

**Xinod** · 28-12-2011, 15:01

per sommi capi
- splitta la data per /
- crea un nuovo oggetto Date con quei valori (occhio al mese che va diminiuto di 1)
- compara i 3 elementi dell' array risultante dallo split con, rispettivamente, getDate(), getMonth() e getFullYear() dell' oggetto Date
se i confronti confermano che i valori sono identici la data e' valida

ciao, buone feste

**ferdinandobassi** · 28-12-2011, 16:58

Ciao,
ho aggiunto una funzione del genere:

codice:

function checkdate(input){
//Primo controllo sulla forma della data
var validformat=/^\d{2}\/\d{2}\/\d{4}$/
var returnval=false
if (!validformat.test(input.value))
alert("Data inserita in forma errata.")
else{ 
//Controllo dettagliato su lunghezza giorni e mesi
var dayfield=input.value.split("/")[0]
var monthfield=input.value.split("/")[1]
var yearfield=input.value.split("/")[2]
var dayobj = new Date(yearfield, monthfield-1, dayfield)
if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
alert("Data inserita in forma errata.")
else
returnval=true
}
if (returnval==false) input.select()
return returnval
}

e ho utilizzato l'evento onBlur nel text input:

codice:

<input type="text" id="value2" name="value2" maxlength="10"
value="" onBlur="return checkdate(this)" onkeyup=" return formatTime(this, event);">

Sembra funzionare tutto.
Grazie per il suggerimento.

Ciao ciao

Discussione: Javascript per completamento text input

Strumenti discussione

Ricerca discussione

Visualizza

Javascript per completamento text input

Permessi di invio