Форум

klk.pma · #1 (**permalink**) 21.11.2014, 19:15

Добрый день! Я начинающий, поэтому если можно "пинайте" с примерами.
Возникла такая проблема:
есть несколько 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="">

А как реализовать с помощью классов, так чтобы одна функция подходила для всех элементов с определенным классом?

danik.js · #2 (**permalink**) 21.11.2014, 19:24

Сообщение от klk.pma

В них должны вноситься только цифры

Этот инпут больше подойдет:

<input type="number" max="99999999">

Но вводить позволяет не только числа. Но форма все равно не отправится если значение неверное.

klk.pma · #3 (**permalink**) 21.11.2014, 19:33

Сообщение от danik.js

Этот инпут больше подойдет:

<input type="number" max="99999999">

Но вводить позволяет не только числа. Но форма все равно не отправится если значение неверное.

Я знаю про number, но этот вариант не подходит. Самый подходящий вариант это JS

klk.pma · #4 (**permalink**) 21.11.2014, 19:45

Хотя бы подскажите, как правильно обращаться к классам, чтобы менять их значение. Пробовал через getElementsClassName("digit"), но все тшетно

krutoy · #5 (**permalink**) 21.11.2014, 19:52

<!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>

klk.pma · #6 (**permalink**) 21.11.2014, 20:01

Спасибо, то что надо!
Кстати, первый раз увидел такой перебор цикла for(i in digits). Такое только в JS возможно?

krutoy · #7 (**permalink**) 21.11.2014, 20:04

Сообщение от klk.pma

Такое только в JS возможно?

Я в питоне кажется видел такое. Еще где-то. Да не, во многих яп есть подобное, я думаю.

klk.pma · #8 (**permalink**) 21.11.2014, 20:07

Сообщение от krutoy

<!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>

Пожалуйста, подскажите, а есть вариант реализовать подобную задачу через событие клавиатуры? Интересуюсь на будущее, для других похожих задач

krutoy · #9 (**permalink**) 21.11.2014, 20:10

Сообщение от klk.pma

Пожалуйста, подскажите, а есть вариант реализовать подобную задачу через событие клавиатуры? Интересуюсь на будущее, для других похожих задач

Можно, а почему нет. Какая разница.

<!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

klk.pma · #10 (**permalink**) 21.11.2014, 20:19

krutoy, а этот скрипт должен быть только после всех инпутов или его можно размещать в подключаемый файл в head?

Форум

Справочник

Discord чат

Курсы javascript