campo di testo formato orario HH:00 e' possibile in automatico?

**allin81** · 30-07-2011, 22:14

Ho un campo di testo e vorrei fare in modo che in automatico questo campo sia obbligatorio di soli numeri e appena si digitano i primi 2 numeri in automatico escano i due punti per far mettere i minuti, tipo questo formato qua

14:30
come posso fare?

**0-c00l** · 30-07-2011, 22:38

Prova così:

codice:

 <script type="text/javascript">
function duepunti(id, e) {
var obj = document.getElementById(id);
	if ( ((e.keyCode >= 48) && (e.keyCode <= 57)) || (e.keyCode == 8) ) {
		var content = obj.innerHTML;
                obj.innerHTML = content + ":";
	} else {
		return false;
	}
}
</script>

<input type="text" id="ora" onkeyup="duepunti('ora',event);" />

**allin81** · 30-07-2011, 22:43

non funziona... dovrebbe farlo in automatico mentre lo scrivo, no?

**carlomarx** · 31-07-2011, 00:09

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function checkTime (oToCheck, oPssEvt1) {
	var	oKeyEvent = oPssEvt1 || window.event || { charCode: 0, keyCode: 0 },
		nChar = oKeyEvent.charCode,
		nKey = oKeyEvent.keyCode,
		sVal = oToCheck.value,
		sNewVal = sVal.substring(0, oToCheck.selectionStart - (nKey === 8 && nChar === 0 ? 1 : 0)) + (nChar > 0 ? String.fromCharCode(nChar) : "") + sVal.slice(oToCheck.selectionEnd + (nKey === 46 && nChar === 0 ? 1 : 0)), bFormat = nChar === 0 || /^\d{1,2}(?:\:\d{1,2})?$/.test(sNewVal);

	if (bFormat) {
		var bCorrect = sNewVal.split(":");
		for (var nDigit = 0; nDigit < bCorrect.length; nDigit++) {
			if (parseFloat(bCorrect[nDigit]) > 59) {
				bFormat = false; break;
			}
		}

	}

	return bFormat;
}

function formatTime (oToFix, oPssEvt2) {
	var nKey = (oPssEvt2 || window.event || { keyCode: 8 }).keyCode, nSelS = oToFix.selectionStart, nSelE = oToFix.selectionEnd, sVal = oToFix.value;
	if (nSelS === nSelE && nSelS === sVal.length && /^\d{1,2}$/.test(sVal) && parseFloat(sVal) > 5 && nKey !== 8 && nKey !== 46 && (nKey < 32 || nKey > 41)) {
		sVal += ":";
		oToFix.value = sVal.replace(/^(\d)\:/, "0$1:");
		oToFix.focus();
	} else if (/\:\d$/.test(sVal) && parseFloat(/\d$/.exec(sVal)) > 5) {
		oToFix.value = sVal.replace(/\d$/, "0$&");
		oToFix.focus();
	}
}
</script>
</head>

<body>
<form name="myForm">


<input type="text" name="myInput" onkeypress="return checkTime(this,event);" onkeyup="formatTime(this,event);" onpaste="return false;" /></p>
</form>
</body>
</html>

**allin81** · 31-07-2011, 02:59

ottimo, cosi' funziona bene.
L'unica cosa "sbagliata" è che magari uno puo' mettere orari errati tipo 55:87
Non si puo' fare un controllo per non far uscire questi orari errati?

**carlomarx** · 31-07-2011, 13:29

Originariamente inviato da allin81
ottimo, cosi' funziona bene.
L'unica cosa "sbagliata" è che magari uno puo' mettere orari errati tipo 55:87
Non si puo' fare un controllo per non far uscire questi orari errati?

Zzzì badrone:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function checkTime (oToCheck, oPssEvt1) {
	var	oKeyEvent = oPssEvt1 || window.event || { charCode: 0, keyCode: 0 },
		nChar = oKeyEvent.charCode,
		nKey = oKeyEvent.keyCode,
		sVal = oToCheck.value,
		sNewVal = sVal.substring(0, oToCheck.selectionStart - (nKey === 8 && nChar === 0 ? 1 : 0)) + (nChar > 0 ? String.fromCharCode(nChar) : "") + sVal.slice(oToCheck.selectionEnd + (nKey === 46 && nChar === 0 ? 1 : 0)), bFormat = nChar === 0 || /^\d{1,2}(?:\:\d{1,2})?$/.test(sNewVal);

	if (bFormat) {
		var aCorrect = sNewVal.split(":");
		for (var nDigit = 0; nDigit < aCorrect.length; nDigit++) {
			if (parseFloat(aCorrect[nDigit]) > 23 + 36 * nDigit) {
				bFormat = false; break;
			}
		}
	}

	return bFormat;
}

function formatTime (oToFix, oPssEvt2) {
	var nKey = (oPssEvt2 || window.event || { keyCode: 8 }).keyCode, nSelS = oToFix.selectionStart, nSelE = oToFix.selectionEnd, sVal = oToFix.value;
	if (nSelS === nSelE && nSelS === sVal.length && /^\d{1,2}$/.test(sVal) && (nSelS === 2 || parseFloat(sVal) > 2) && nKey !== 8 && nKey !== 46 && (nKey < 32 || nKey > 41)) {
		sVal += ":";
		oToFix.value = sVal.replace(/^(\d)\:/, "0$1:");
		oToFix.focus();
	} else if (/\:\d$/.test(sVal) && parseFloat(/\d$/.exec(sVal)) > 5) {
		oToFix.value = sVal.replace(/\d$/, "0$&");
		oToFix.focus();
	}
}
</script>
</head>

<body>
<form name="myForm">


<input type="text" name="myInput" onkeypress="return checkTime(this,event);" onkeyup="formatTime(this,event);" onpaste="return false;" /></p>
</form>
</body>

**TrueLies** · 01-08-2011, 14:07

Ai fini della tua applicazione riproporsi di ottenere l'effetto durante la digitazione (onkeyup) è una scelta probabilmente dovuta a una necessità estetica, ma potrebbe essere poco ponderata in termini di funzionalità: poichè in termini funzionali non solo non è necessario, ma può rivelarsi addirittura controproducente (per questo io sottolineo spesso che le cose bisogna farle quando serve, e non solo perchè si può).

I motivi sono questi:

1) un sacco di codice superfluo (con le evidenti ricadute sulla portabilità) per ottenere onkeyup quello che con una riga di codice (una singola espressione regolare!) ottieni onblur: ai fini della formattazione e della validazione onsubmit è del tutto identico.
2) è disfunzionale per l'utente, il quale specie se poco esperto può ritrovarsi piuttosto spaesato dalla cosa (non sottovalutare mai la ottusità del grande pubblico... non è tutto composto di sagaci ventenni): una espressione regolare invece che valida il tutto e eventualmente lo riadatta con i due punti mentre l'utente non ha più lì l'occhio evita di confondere l'utente, e ottiene lo scopo per te in un lampo anzichè procrastinarlo ad ogni colpo di tastiera.
3) non ti dà flessibilità: cosa accadrebbe se un domani decidi di inserirci anche i secondi, o meglio ancora se tu decidessi che anche la formulazione 5:10 è ammessa - e in quel caso ti si solleverebbe il dubbio: questo 5 sta per 05 o per 17...? Determinarlo onkeyup ti complessificherebbe enormemente la cosa, e anzi non la risolverebbe affatto questa ambiguità perchè tocca comunque o allertare l'utente o prendere una decisione arbitraria al posto suo: e tutto questo proprio mentre scrive (e che questo migliorerebbe la usabilità della applicazione è tutto da dimostrare: anzi si direbbe vero proprio il contrario).

Per cui valuta te se farlo onblur (eventualmente onsubmit con return false/true se preferisci).
Io non esiterei un istante, ma la pagina è tua e quindi anche la scelta è tua

A quel punto una qualsiasi espressione regolare che ti controlli il formato dd:dd è in grado con un banale replace di correggerti il formato e inserire i due punti laddove l'utente ha, magari (o verosimilmente), inserito un punto: 17.30 oppure di allertarlo sulla totale inidoneità dei dati immessi - tipo: 'gatto'...

Discussione: campo di testo formato orario HH:00 e' possibile in automatico?

Strumenti discussione

Ricerca discussione

Visualizza

campo di testo formato orario HH:00 e' possibile in automatico?

Permessi di invio