function onlyNumbers(event) {
var key = event.keyCode || event.which;
key = String.fromCharCode(key);
var regex = /^[0-9.,]+$/;
if (!regex.test(key)) {
event.returnValue = false;
if (event.preventDefault) event.preventDefault();
}
}Bu kod, sadece sayısal karakterleri (0-9), nokta (.) ve virgül (,) kabul eder. Bu fonksiyonu input elementinin onkeypress özelliği ile birleştirerek kullanabilirsiniz:
<input type="text" onkeypress="onlyNumbers(event)">
İkinci özellik için, varsayılan değer formatı için aşağıdaki JavaScript kodunu kullanabilirsiniz:
function formatPrice(price) {
var formattedPrice = parseFloat(price).toFixed(2);
return formattedPrice.replace(".", ",");
}Bu fonksiyon, girilen fiyatı 0,00 formatına dönüştürür. Örneğin, 12.5 girilirse 12,50 olarak formatlanır. Bu fonksiyonu input elementinin value özelliğine atayarak varsayılan değeri ayarlayabilirsiniz:
<input type="text" value="0,00" onkeypress="onlyNumbers(event)" onchange="this.value=formatPrice(this.value)">
Üçüncü özellik için, input alanında value değiştiğinde kontrol yapmanız gerekiyor. Bunun için onchange olayını kullanabilirsiniz. Aşağıdaki JavaScript kodu, input alanında value değiştiğinde, 124,93 değerinin 124,90 olarak güncellenmesini sağlar:
function roundPrice(price) {
var formattedPrice = parseFloat(price.replace(",", ".")).toFixed(2);
var lastChar = price.slice(-1);
var roundDownPrice = formattedPrice.replace(".", ",");
if (lastChar === ",") {
return roundDownPrice;
}
return roundDownPrice.replace(",", ".");
}Bu fonksiyon, fiyatı 0,00 formatından float bir sayıya dönüştürür ve son karakter virgül ise, değeri virgüle yuvarlar. Son olarak, bu fonksiyonu input elementinin onchange özelliğiyle birleştirerek kullanabilirsiniz:
<input type="text" value="0,00" onkeypress="onlyNumbers(event)" onchange="this.value=roundPrice(this.value)">
Dördüncü özellik için, input alanındaki imleç virgülün sol tarafında olduğunda, sağa geçiş yapılması gerekiyor. Bunun için aşağıdaki JavaScript kodunu kullanabilirsiniz:
function moveCursorRight(event, element) {
var caretPos = element.selectionStart;
if (element.value[caretPos-1] === ",") {
element.selectionStart = caretPos+1;
element.selectionEnd = caretPos+1;
event.preventDefault();
}
}Bu fonksiyon, input alanında imleç virgülün sol tarafındaysa, imlecin sağa doğru kaydırılmasını sağlar. Bu fonksiyonu input elementinin onkeydown özelliğiyle birleştirerek kullanabilirsiniz:
<input type="text" value="0,00" onkeypress="onlyNumbers(event)" onchange="this.value=roundPrice(this.value)" onkeydown="moveCursorRight(event, this)">
Bu şekilde, istediğiniz özelliklere sahip bir price inputu oluşturabilirsiniz. Ancak, kullanıcının hatalı girişler yapmasını engelleyemeyebilirsiniz. Kullanıcıların girdiği değerleri doğrulamak ve hataları düzeltmek için ek kontroller eklemeniz gerekebilir. Ayrıca, kullanıcının farklı ülke veya bölge ayarlarına göre farklı fiyat formatları kullanabileceğini de göz önünde bulundurmanız gerekiyor.