Я, наконец, понял это (потратив на это около трех дней). Я мог бы спросить производителя Chrome, как называется Javascript, но было бы намного лучше, если бы я мог заставить браузеры вести себя правильно. Более широкая цель этого вопроса, который в первую очередь касается математических форм, заключается в следующем:
- Согласованное межбраузерное поведение: все браузеры и версии браузеров должны вести себя одинаково.
- Последовательное поведение внутри браузера: десятичная запятая в полях ввода = десятичная запятая в поле вывода. То же самое относится и к десятичным точкам.
- Веб-разработчик должен иметь возможность поставить запятую или точку.
- Непреднамеренные ошибки ввода посетителем должны быть исправлены или обнаружены. Клавиши с точками и запятыми всегда находятся рядом друг с другом, и разницу трудно увидеть, особенно на маленьких экранах.
- На планшетах поле числового ввода, которое получает фокус, должно открывать цифровую клавиатуру/пэд.
- Действительный HTML.
Эти два метода предлагают следующее:
ПРИНУДИТЕЛЬНАЯ ДЕСЯТИЧНАЯ ТОЧКА
<!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>
Живая демонстрация здесь: http://codepen.io/anon/pen/bhajB?editors=100. .
ОБЯЗАТЕЛЬНО ДОПУСКАЕТСЯ ДЕСЯТИЧНОЙ ЗАПЯТОЙ
<!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>
Живая демонстрация здесь: http://codepen.io/anon/pen/jqFeJ?editors=100. .
.
Несколько пояснений:
input type="tel": только числовые типы ввода подтягивают цифровую клавиатуру/панель на iOS и Android. type="text" pattern="[0-9]*" не работает на Android. Кроме того, input type="number" заставляет старые Chrome (и, возможно, Safari на Win) удалять введенные запятые без надлежащего уведомления. Например. 4,5 незаметно превращается в 45. Отсюда и input type="tel".- Проверка Javascript: это лучше, чем проверка HTML5, потому что последняя не поддерживается старыми браузерами, а всплывающие подсказки с текстом предупреждений не могут быть изменены.
- CSS:
input[type="tel"]:invalid {box-shadow: none;}: который не позволяет новым версиям Firefox и, возможно, другим браузерам в будущем помещать (красную) предупреждающую рамку вокруг каждого поля ввода, которое он считает заполненным неправильно.
Остальной код должен говорить сам за себя. Коды были протестированы в IE8/9, Chrome 18 и 35 (Win/Android 4.1 Jelly Bean), Safari 5 (Win) и 7 (iOS) и собственном браузере Android (Android 4.1).
Есть только одно несовершенство и одно ограничение. Недостаток заключается в том, что цифровая клавиатура для телефонных номеров на Android немного отличается от обычной цифровой клавиатуры и может вызвать недоумение у опытных пользователей Android. Но все необходимые ключи есть, и большинство посетителей этого даже не заметят. Ограничение состоит в том, что посетители могут ввести только одну запятую или точку в поле ввода, то есть разделитель. Вы могли бы проинструктировать их заранее. И если они (по-прежнему) вводят больше, это фиксируется сценарием проверки.
Протестируйте живые демонстрации, если хотите. Если вы все еще найдете что-то неправильное или непоследовательное, пожалуйста, оставьте комментарий.
person
Frank Conijn
schedule
26.06.2014
textв сочетании с шаблоном регулярного выражения действительно излечивает математическое / отображаемое поведение, но сtextпланшеты подтягивают свои обычные клавиатуры, как только шаблон включает точку или запятую. У меня есть форма, в которую нужно ввести до 11 цифр, и пользователей планшетов слишком раздражает необходимость каждый раз переключать клавиатуру на цифровую. - person Frank Conijn schedule 25.06.2014