Sostituire il punto con la virgola in una textbox numerica in JavaScript

Capita spesso di dover realizzare delle applicazioni che richiedono un input limitato ai soli caratteri numerici.
Inoltre, essendo in italia, il nostro separatore decimale è la virgola e non il punto, quindi dobbiamo preoccuparci anche di questa casistica.

L'utility seguente, in JavaScript puro, gestisce queste situazioni:
  • limitare l'input ai solo caratteri numerici
  • sostituire il punto con la virgola (anche quello del tastierino numerico)
  • limitare il separatore decimale a uno solo
  • gestire i tasti di spostamento e cancellazione (del, canc, left, right, home, end)

JavaScript

/*
 * http://www.sgart.it
 * permette di limitare l'input ai solo caratteri numerici, limitare il separatore decimale a uno solo 
 * e sostituire il punto con la virgola (anche quello del tastierino numerico)
 * permette l'uso di tasti: del, canc, left, right, home, end
 */
function handleReplaceDotWithComma(sender, e){
	var k = e.key;
	//console.log('Key:', k);
	var objInput = sender;
	var s = objInput.value;
	if(k==='Backspace' || k==='Delete' || k==='Left' || k==='Right' || k==='Home' || k==='End' || k==='ArrowLeft' || k==='ArrowRight' ){
		//gestisco i tasti di movimento
		return true;
	}
	if(s.indexOf(',')>=0 && (k==='.' || k==='Decimal' || k===',')){	
		// impedisco che vengano inserite più virgole
		return false;
	}
	if(k==='.' || k==='Decimal'){	
		// sostituisco il punto con la virgola (anche con il tastierino numerico)
		if(document.selection){	
			//IE
			var range = document.selection.createRange();
			range.text = ',';
		} else if(objInput.selectionStart || objInput.selectionStart == '0'){	
			// Chrome + FF
			var start = objInput.selectionStart;
			var end = objInput.selectionEnd;
			objInput.value = s.substring(0, start)+ ',' + s.substring(end, s.length);
			objInput.selectionStart = start + 1;
			objInput.selectionEnd = start +1;
		} else {
			objInput.value = s + ',';
		}
		return false;
	}
	if('1234567890,'.indexOf(k)==-1){
		return false;
	}
	return true;
}
Per utilizzarlo va gestito l'evento onkeydown su ogni tag input:

HTML

<input type="text" onkeydown="return handleReplaceDotWithComma(this, event);">
Lato C# per fare il parse corretto delle date in italiano (con la virgola) usa il metodo Parse o TryParse dell'oggetto double:

C#

// imposto la culture in italiano per le conversioni 
// in modo da non dipendere dalle impostazioni del server su cui gira
public static CultureInfo _ciIT = new CultureInfo(1040);

Double.Parse("12,31", _ciIT);
//oppure
double v = 0;
double.TryParse("12,31", NumberStyles.AllowDecimalPoint, _ciIT, out v);
Tags:
C#236 HTML74 HTML 554 JavaScript184
Potrebbe interessarti anche: