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 ma, the browsers do the calculations with the number as if the ma 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 ma. 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: . 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 mas, decimal dots, or a bination thereof. And be surprised at the displayed result - it doesn't matter whether dot or ma is used for the input, the calculation output is always the same and the output is always displayed with a ma.
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) ma (dot OR period OR "full stop") browser feature did not give me the answer I need. I did e 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 es anywhere near to what I'm trying to find out.
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 ma, the browsers do the calculations with the number as if the ma 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 ma. 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 mas, decimal dots, or a bination thereof. And be surprised at the displayed result - it doesn't matter whether dot or ma is used for the input, the calculation output is always the same and the output is always displayed with a ma.
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) ma (dot OR period OR "full stop") browser feature did not give me the answer I need. I did e 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 es anywhere near to what I'm trying to find out.
- FYI, I'm using UK locale (dot for decimal place) and Chrome on Win is treating any value with a ma as invalid. So this seems to work only one way and therefore I think it's a bug in Chrome. I don't have answers but here are some related questions: Chrome auto formats input number, How to handle floats and decimal separators with html5 input type number – jfrej Commented Jun 25, 2014 at 11:59
- @jfrej - That is also what my Chrome 18, embedded in my code editor as one of the preview options, does. But anywhere between v. 18 and 35 that behavior has changed. And the linked article by the Chrome maker (i.e. discussion with a user) clearly states that it is not a bug but a feature. With regards to the SO thread you're linking to: I tried that pattern method extensively, in all kinds of configurations, but it is no cure for the peculiar output - always with a ma as decimal separator. I will go over it again, though, and will let you know if I managed in any way. – Frank Conijn - Support Ukraine Commented Jun 25, 2014 at 12:19
-
@jfrej - In addition: setting the input type to
textin bination with the regex pattern does cure the mathematical/display behavior, but withtextthe tablets pull up their normal keyboards as soon as the pattern includes a dot or a ma. I have a form in which up to 11 figures have to be entered, and it is just too annoying for tablet users to have to switch their keyboard to numeric every time. – Frank Conijn - Support Ukraine Commented Jun 25, 2014 at 12:41 - @jfrej: I finally figured it out. See my (own) answer. – Frank Conijn - Support Ukraine Commented Jun 26, 2014 at 6:39
1 Answer
Reset to default 3 +50I 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:
- Consistent interbrowser behavior: all browsers and browser versions should behave the same.
- Consistent intrabrowser behavior: decimal ma in input fields = decimal ma in output field. The same counts for decimal dots.
- The web developer should have the choice of forcing ma or dot.
- Inadvertent input errors by the visitor must be corrected or caught. The dot and ma keys are always next to each other, and the difference can be hard to see, especially on small screens.
- On tablets, a numerical input field that gets focus should pull up the numerical keyboard/pad.
- Valid HTML.
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 ma 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 ma 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 ma 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 ma 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 mas, without proper notice. E.g. 4,5 is silently turned into 45. Hence theinput type="tel".- Javascript validation: that is better than HTML5 validation, because the latter is not supported by older browsers, and its warning text balloons cannot be changed.
- CSS:
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 ma 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 ment.