onkeypress, cursore all'interno del campo di testo

**elisavd83** · 19-06-2009, 11:45

Ciao a tutti,

sto scrivendo una funzione che ha come scopo quello di agevolare l'inserimento di date ed ore tramite il completamento automatico con i caratteri separatori per i due formati ( "/" per le date e ":" per le ore).
Mostro due campi vuoti per data ed ora, rispettivamente con i valori iniziali "__/__/____" e "__:__" e sull'evento onKeyPress, controllo innanzitutto se si tratta di un carattere numerico oppure di uno backslash (per la cancellazione), quindi procedo con il replace della prima occorrenza di "_".
Il problema è che dopo il replace, il cursore all'interno della stringa si sposta alla fine, quindi l'utente dovrebbe tornare indietro.

Ecco la mia pagina html con il codice javascript embedded:

<!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>Test Page</title>
<script>

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 formatHour( object, event ) {
var validate = isBackSpace(event) || isNumber(event) ;
if (validate && isNumber(event) ) {
var c = String.fromCharCode( event.charCode ? event.charCode : event.keyCode );
var firstUnderScore = object.value.indexOf('_');
var newValue = object.value.replace('_', c );
object.value = newValue;
}

return validate;
}

function formatTime( object ) {

}

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

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

</body>
</html>

**dottwatson** · 19-06-2009, 16:42

eccoti un esempio che potrebbe tornarti utile.. la funzione in questione evita che possano essere digitate lettere e accetta solo numeri.... potresti modificarla a tuo piacimento e fare un controllo sulla lunghezza del contenuto del campo

codice:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 <head>
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
function numeralsOnly(evt) 
  {
  evt = (evt) ? evt : event;
  var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
  if (charCode > 31 && (charCode < 48 || charCode > 57)) 
    {
    return false;
    }
  return true;
  }
</script>     
<title>
</title>  
 </head>
 <body>
<input type="text" name="prova" value="" onkeypress="return numeralsOnly(event)">     
 </body>

</html>

**Pastore12** · 19-06-2009, 17:10

Era da un po' che non giochicchiavo più su questo sub-forum... quindi scusami se non ho mantenuto la consegna..

Ad ogni modo prova a vedere se questa cosa qua può tornarti di una qualche utilità:

Codice PHP:


<!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>Test Page</title>

<script>



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 ("troppi caratteri");

        }

        

    }

    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>

**elisavd83** · 19-06-2009, 17:34

E' proprio quello che mi serviva!
Non mi resta che validare il contenuto ... Grazie mille :-)

Discussione: onkeypress, cursore all'interno del campo di testo

Strumenti discussione

Ricerca discussione

Visualizza

onkeypress, cursore all'interno del campo di testo

Permessi di invio