Для нескольких input одна функция
Добрый день! Я начинающий, поэтому если можно "пинайте" с примерами.
Возникла такая проблема: есть несколько input <input class="digit" type="text" maxlength="8" name="ot" value=""> <input class="digit" type="text" maxlength="8" name="do" value=""> В них должны вноситься только цифры, а все остальное не должно даже отображаться в них. Если есть один input, то это можно реализовать через это:
document.getElementById("digit").onkeypress = function (e) {
return !(/[^0-9]/.test(String.fromCharCode(e.charCode)));
}
<input id="digit" type="text" maxlength="8" name="ot" value=""> А как реализовать с помощью классов, так чтобы одна функция подходила для всех элементов с определенным классом? |
Цитата:
<input type="number" max="99999999"> Но вводить позволяет не только числа. Но форма все равно не отправится если значение неверное. |
Цитата:
|
Хотя бы подскажите, как правильно обращаться к классам, чтобы менять их значение. Пробовал через getElementsClassName("digit"), но все тшетно
|
<!DOCTYPE HTML>
<html>
<head><meta charset="windows-1251" /> </head>
<body>
<input class="digit" type="text" maxlength="8" name="ot" value="">
<input class="digit" type="text" maxlength="8" name="do" value="">
<script>
digits=document.getElementsByClassName("digit")
filter=function () {
if(/\D+/g.test(this.value)) this.value=this.value.replace(/\D+/g, "")
}
for(i in digits){if(/\d+/.test(i)) digits[i].oninput=filter}
</script>
</body>
</html>
|
Спасибо, то что надо!
Кстати, первый раз увидел такой перебор цикла for(i in digits). Такое только в JS возможно? |
Цитата:
|
Цитата:
|
Цитата:
<!DOCTYPE HTML>
<html>
<head><meta charset="windows-1251" /> </head>
<body>
<input class="digit" type="text" maxlength="8" name="ot" value="">
<input class="digit" type="text" maxlength="8" name="do" value="">
<script>
digits=document.getElementsByClassName("digit")
filter=function (e) {
console.log(e.keyCode)
if(/\D+/g.test(this.value)) this.value=this.value.replace(/\D+/gi, "")
}
for(i in digits){if(/\d+/.test(i)) digits[i].onkeyup=filter}
</script>
</body>
</html>
Только притормаживает немного у меня в FF |
krutoy, а этот скрипт должен быть только после всех инпутов или его можно размещать в подключаемый файл в head?
|
Цитата:
|
Цитата:
Памятка! JavaScript хороший и динамичный язык, многое может делать разными вариантами в этом есть и плюсы и минусы. А минусы в том, что каждый день большая часть квалифицированных разработчиков бьются над производительностью кода. А подобные конструкции: Цитата:
for(var index = digits.length; index--;) {
digits[index].oninput=filter;
}
как минимум будет работать в 100 раз быстрее, намного приятнее и легко читается. Во вторых переменные нужно инициализировать, как можно меньше использовать регулярные выражения, особенно там где от них нет проку и т.д. |
Цитата:
Кстати что мешает применить скрипт к number типу? Я вот ща с мобилы - так мне клава числовая открылась. Я не могу туда букву ввести даже без скрипта. |
devote,
ко-ко-ко. Над производительностью бьются мартышки. инженер пишет прототип и оптимизирует узкие места. |
Цитата:
<!DOCTYPE HTML>
<html>
<head><meta charset="windows-1251" /> </head>
<body>
<input class="digit" type="text" maxlength="8" name="ot" value="">
<input class="digit" type="text" maxlength="8" name="do" value="">
<script>
get=function(){
var el=document.createElement("input")
el.setAttribute("class", "digit")
document.body.appendChild(el)
}
count=1000
while(count--) get()
digits=document.getElementsByClassName("digit")
func1=function(){alert(1)}
func2=function(){alert(2)}
console.time("for in")
for(i in digits){if(/\d+/.test(i)) digits[i].onkeyup=func1}
console.timeEnd("for in")
console.time("for")
for(var index = digits.length; index--;) {
digits[index].oninput=func2;
}
console.timeEnd("for")
//FF:
//for in: timer started start_page.html:22
//for in: 0ms start_page.html:24
//for: timer started start_page.html:26
//for: 16ms
</script>
</body>
</html>
Другой, нижеотписавшийся "мастер" вообще не стоит внимания. |
Цитата:
|
Если представленный вариант неправильный, можете показать корректный вариант?
|
klk.pma,
Да не, они просто домохались до for in, якобы, он медленный (у дебилов он действительно может быть медленным, но в целом -- это гон, см тест выше), замени на for, если хочешь, и все.
<!DOCTYPE HTML>
<html>
<head><meta charset="windows-1251" /> </head>
<body>
<input class="digit" type="text" maxlength="8" name="ot" value="">
<input class="digit" type="text" maxlength="8" name="do" value="">
<script>
digits=document.getElementsByClassName("digit")
filter=function () {
if(/\D+/g.test(this.value)) this.value=this.value.replace(/\D+/g, "")
}
//for(i in digits){if(/\d+/.test(i)) digits[i].oninput=filter}
for(var i = digits.length; i--;) {
digits[i].oninput=filter;
}
</script>
</body>
</html>
|
krutoy, я не знаю что у тебя за ФФ такой, который за никакое время умудряется выполнить код, но у меня результаты иные. Конечно про 100 раз я говорил образно, но как минимум в 2-4 раза точно быстрее..
Chrome: for in: 4.000ms for: 1.000ms IE 11: for in: 9.8345 мс for: 5.8308 мс FF: for in: таймер запущен showhtml:21 for in: 5.17мс showhtml:23 for: таймер запущен showhtml:25 for: 2.53мс Цитата:
|
devote,
Я извиняюсь за резкие слова, но то слово относилось не к тебе лично, а к абстрактному дебилу в вакууме, как-бы, так что не принимай на свой личный счет. Что касаемо for-in, мифы о его медлительности, как мне кажется, рождены из-за его кривого использования. Он итеритует объект вместе со всей цепочкой прототипов, поэтому, если вовремя не выйти из цикла, он будет заниматься перебором бесполезных полей. Его смело можно применять, как правило, если место не суперузкое, только с умом. |
Цитата:
<script type="text/javascript" src="http://devote.github.io/files/letjs/let.js"></script> <input data-let-input="/^\d+$/" class="digit" type="text" maxlength="8" name="ot" value=""> <input data-let-input="/^\d+$/" class="digit" type="text" maxlength="8" name="do" value=""> |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
devote,
Кстати, насчет теста я не соврал. В хроме у меня for отработал, в среднем, процентов на 20 быстрей. Видимо, жедезо и ось играет роль. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
вот в этом посте я привел в пример библиотеку, которая все это учитывает, более подробно о ней можно почитать тут: http://javascript.ru/forum/project/3...rea-input.html
|
Цитата:
Array.prototype.foreach=function(f){
for(var i=0; i<this.length; i++) f(this[i])
}
arr=[]
i=10000
while(i--){arr.push(i)}
tst=function(x){return x + 1}
console.time("forEach")
arr.forEach(tst)
console.timeEnd("forEach")
console.time("foreach")
arr.foreach(tst)
console.timeEnd("foreach")
// forEach: 58ms
// foreach: 1ms
|
Цитата:
Array.prototype.foreach = function (callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(' this is null or not defined');
}
// 1. Положим O равным результату вызова ToObject passing the |this| value as the argument.
var O = Object(this);
// 2. Положим lenValue равным результату вызова внутреннего метода Get объекта O с аргументом "length".
// 3. Положим len равным ToUint32(lenValue).
var len = O.length >>> 0;
// 4. Если IsCallable(callback) равен false, выкинем исключение TypeError.
// Смотрите: [url]http://es5.github.com/#x9.11[/url]
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
// 5. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
if (arguments.length > 1) {
T = thisArg;
}
// 6. Положим k равным 0
k = 0;
// 7. Пока k < len, будем повторять
while (k < len) {
var kValue;
// a. Положим Pk равным ToString(k).
// Это неявное преобразование для левостороннего операнда в операторе in
// b. Положим kPresent равным результату вызова внутреннего метода HasProperty объекта O с аргументом Pk.
// Этот шаг может быть объединён с шагом c
// c. Если kPresent равен true, то
if (k in O) {
// i. Положим kValue равным результату вызова внутреннего метода Get объекта O с аргументом Pk.
kValue = O[k];
// ii. Вызовем внутренний метод Call функции callback с объектом T в качестве значения this и
// списком аргументов, содержащим kValue, k и O.
callback.call(T, kValue, k, O);
}
// d. Увеличим k на 1.
k++;
}
// 8. Вернём undefined.
};
arr=[]
i=10000
while(i--){arr.push(i)}
tst=function(x){return x + 1}
console.time("forEach")
arr.forEach(tst)
console.timeEnd("forEach")
console.time("foreach")
arr.foreach(tst)
console.timeEnd("foreach")
// Chrome:
// forEach: 1.000ms
// foreach: 1.000ms
|
Цитата:
Цитата:
Для наитупейшего обхода элементов массива задействовать машину регулярных выражений - это победа :victory: . |
Цитата:
|
Цитата:
form.addEventListener('input',validate); и вперде в инпуте есть тип - тот самый number. Если брауз - копенгаген, то все само будет работать, а если туп - то вы берете getAttribute('type') и получаете number и, соответственно, проверяете по своему любимому паттерну. Это геморройный способ сугубой сраной оптимизации. Легкая избыточность данных существенно все облегчает - х на type, он вообще может быть любым - пишите в pattern свой паттерн и JS вам проверит все что угодно по этому паттерну. Ну, если бразуер тупит. |
Так вот, у меня тоже есть вопрос - а возможно ли перевести взад на человеческий язык криптографию регулярного выражения?
Например if(len && input.pattern && !new RegExp(input.pattern).test(value)) throw 'Здесь '+input.errmsg; Чтобы сообщить что-то осмысленное, а не просто типа "введите перпендикулярно", приходится в том же месте откуда берутся паттерны задавать сообщения об ошибках проверки по паттерну - errmsg. А было бы круто чтобы программа сама, разобралась в требованиях шаблона проверки и написала, типа: Здесь минимум 3 символа, которые должны быть все печатными. |
Цитата:
Понятно откуда ноги воняют? На фронтире, типа, усе сразу получить _правильно_ и тогда налаживать обратную связь и не надо. Лафа! Так вот вполне понятно что без всякого текстового поля можно обойтись и захерачить ему какие хочешь нахуй буквы вместо цифр и посмотреть как сервер чмокнет. ЗЫ Не должен js заниматься санитарией. Потому что обойти его ленточки - как два пальца об асфальт. Вся санитария будет только на сервере, который и сообщит что юзер ввел не перпедикулярно. JS может только проверить и написать что ввели хуйню, по сему факту задизаблить сабмит формы и все такое. Но корежить данные - не должен. Что отправилось - на то сервер только отвечает. |
| Часовой пояс GMT +3, время: 13:33. |