I found a most peculiar browser feature in the latest Chrome (35; Win/Android/iOS) and Safari (7; iOS) versions. If you have a math form with input type="number" and enter a number with a decimal comma, the browsers do the calculations with the number as if the comma were a dot. And if you enter numbers with decimal dots, they do their normal calculations, but the resulting figure is displayed with a decimal comma. That is, in my European (i.e. Dutch) version. I don't know about American versions.
If you would find that hard to believe, I made a demo to demonstrate it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Browser Behavior w/ Number Inputs</title>
<style>
input {
box-sizing: border-box;
margin-top: 10px;
width: 100px;
}
</style>
</head>
<body>
<form name="theForm">
<input type="number" name="A1field" min="0" max="100" step="0.1"> Input field
<br>
<input type="number" name="A2field" min="0" max="100" step="0.1"> Input field
<br>
<input type="button" value="Calculate" onclick="calculateAndPopulate()">
<br>
<input type="number" name="R1field" min="0" max="10000" step="0.01"> Result field
<br>
<input type="reset" value="Reset">
</form>
<script>
function calculateAndPopulate() {
var A1val = theForm.A1field.value;
var A2val = theForm.A2field.value;
var R1 = (A1val*A2val);
theForm.R1field.value = R1;
}
</script>
</body>
</html>
Live demo here: http://codepen.io/anon/pen/xDvCB?editors=100. As implied, you would probably need a version that was made for countries with this kind of notation: € 4.999,99. Enter any two numbers under 100 with: a) one decimal each, and b) decimal commas, decimal dots, or a combination thereof. And be surprised at the displayed result - it doesn't matter whether dot or comma is used for the input, the calculation output is always the same and the output is always displayed with a comma.
Firefox 30 does not have that feature (or bug, depending on how you look at it), and neither does IE9 (don't know about later versions). What I would like to know is whether anyone knows the Javascript name of that feature. I would like to inform the visitors with such Webkits that results can be peculiar.
An extensive internet search using input type = number (converts OR conversion) comma (dot OR period OR "full stop") browser feature did not give me the answer I need. I did come across this article by a maker of Chrome, but that only confirms the (not too well received) feature, does not mention the JS name of it. And neither does this SO thread, which is the only SO thread I could find that comes anywhere near to what I'm trying to find out.
I finally figured it out (after having spent some three days on it). I could have asked the Chrome maker what the Javascript name is, but it would be much better if I could make the browsers behave properly. The broader objective of this question, which is primarily about math forms, is:
These two methods offer that:
FORCED DECIMAL DOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math form with forced dot separator</title>
<style>
input {
box-sizing: border-box;
margin-top: 10px;
width: 100px;
}
input[type="tel"]:invalid {
box-shadow: none; /* 0 doesn't work */
}
</style>
</head>
<body>
<h3>Math form with forced dot separator</h3>
<form name="theForm">
<input type="tel" name="A1field"> Input field
<br>
<input type="tel" name="A2field"> Input field
<br>
<input type="button" value="Multiply" onclick="multiplyAndPopulate()">
<br>
<input type="tel" name="R1field"> Result field
<br>
<input type="reset" value="Reset">
</form>
<script>
var telInputs = document.querySelectorAll('input[type="tel"]');
for (var i=0; i<telInputs.length; i++) {
telInputs[i].onblur = function() {
this.value = this.value.replace(',','.');
}
}
function multiplyAndPopulate() {
var A1 = theForm.A1field.value;
var A2 = theForm.A2field.value;
var R1 = (A1*A2);
if (isNaN(R1) == true) {
alert('In one or more input fields you have used more than the allowed one comma or dot, or entered a non-numerical character.');
return false;
}
else {
theForm.R1field.value = R1;
}
}
</script>
</body>
</html>
Live demo here: http://codepen.io/anon/pen/bhajB?editors=100.
FORCED DECIMAL COMMA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math form with forced comma separator</title>
<style>
input {
box-sizing: border-box;
margin-top: 10px;
width: 100px;
}
input[type="tel"]:invalid {
box-shadow: none; /* 0 doesn't work */
}
</style>
</head>
<body>
<h3>Math form with forced comma separator</h3>
<form name="theForm">
<input type="tel" name="A1field"> Input field
<br>
<input type="tel" name="A2field"> Input field
<br>
<input type="button" value="Multiply" onclick="multiplyAndPopulate()">
<br>
<input type="tel" name="R1field"> Result field
<br>
<input type="reset" value="Reset">
</form>
<script>
var telInputs = document.querySelectorAll('input[type="tel"]');
for (var i=0; i<telInputs.length; i++) {
telInputs[i].onblur = function() {
this.value = this.value.replace('.',',');
}
}
function multiplyAndPopulate() {
var A1 = theForm.A1field.value.replace(',','.'); // not visible
var A2 = theForm.A2field.value.replace(',','.'); // not visible
var R1 = (A1*A2);
if (isNaN(R1) == true) {
alert('In one or more input fields you have used more than the allowed one comma or dot, or entered a non-numerical character.');
return false;
}
else {
theForm.R1field.value = R1;
theForm.R1field.value = theForm.R1field.value.replace('.',',');
}
}
</script>
</body>
</html>
Live demo here: http://codepen.io/anon/pen/jqFeJ?editors=100.
.
A few explanations:
input type="tel": only numerical input types pull up the numerical keyboard/pad on iOS and Android. type="text" pattern="[0-9]*" does not work on Android. Also, input type="number" makes older Chromes (and possibly Safaris on Win) delete entered commas, without proper notice. E.g. 4,5 is silently turned into 45. Hence the input type="tel".input[type="tel"]:invalid {box-shadow: none;}: that stops new Firefox versions, and possibly more browsers in the future, from putting a (red) alerting border around every input field it deems filled in incorrectly. The rest of the code should be self-explanatory. The codes have been tested in IE8/9, Chrome 18 and 35 (Win/Android 4.1 Jelly Bean), Safari 5 (Win) and 7 (iOS), and Android's own browser (Android 4.1).
There is just one imperfection and one limitation. The imperfection is that the numerical keypad for telephone numbers on Android is a bit different from the normal numerical keyboard, and may raise some eyebrows in experienced Android users. But all necessary keys are present, and most visitors won't even notice it. The limitation is that visitors can enter only one comma or dot per input field, i.e. the separator. You could instruct them beforehand. And if they (still) do enter more, it is caught by the validation script.
Test the live demos if you will. If you would still find anything wrong or inconsistent, please leave a comment.