3

Есть задача чтобы пользователи могли ввести в определенные инпуты только цифры. Первоначально поставил атрибут onkeyup

onkeyup="this.value = this.value.replace (/\D/, '')"

Все работает, но дело в том что на странице выводится только 5 таких инпутов и с ними все в порядке. Но есть еще под ними ссылка при нажатии на которую появляются новые инпуты.

$(".addingrid").live("click", function(){
    $(this).before("<input onkeyup=\"this.value = this.value.replace (/\D/, '')\" class='kolvo' style='margin-left:7px; margin-right:7px; id='65"+ ingridkolvocount++ +"' type='text' name='PROPERTY[65]["+ ingridcountkolvo++ +"]' size='25' value=''><br/><br/>");
});

В новых созданных инпутах ввод только цифр не срабатывает. Как сделать чтобы проверка срабатывала и в новых инпутах?

3 ответа 3

5

Вместо метода live() используем on(), в инпутах убираем:

onkeyup="this.value = this.value.replace (/\D/, '')"

Пишем следующее:

$('.kolvo').on('keyup', function(){
    $(this).val($(this).val().replace (/\D/, ''));
});
$(".addingrid").on("click", function(){
    $(this).before("<input class='kolvo' id='65"+ ingridkolvocount++ +"' type='text' name='PROPERTY[65]["+ ingridcountkolvo++ +"]' value=''><br/><br/>");
});

И стили лучше прописать в отдельном файле. "Котлеты отдельно, мухи отдельно" и не надо миксов 3 в 1: HTML+JS+CSS.

.kolvo {
    margin-left:7px; 
    margin-right:7px;
    width: 175px;
}
2
  • по-моему $('.kolvo').on('keyup', function(){}) не будет навешен на динамически созданные элементы, или будет? и ещё лучше заменить: $(this).val($(this).val().replace(/\D/, '')); на: this.value = this.value.replace(/\D/, '');
    – Spectre
    27 сен 2012 в 5:47
  • 2
    Что бы замена работала глобально, а так же при CTRL+V нужно добавить модификатор g: $(this).val($(this).val().replace (/\D/g, '')); 1 фев 2018 в 22:31
2

function cislo(){
    if (event.keyCode < 48 || event.keyCode > 57)
    event.returnValue= false;
}
<input type="text" onKeyPress="cislo()">

2
  • Но я могу сюда скопировать текст, и он вставится в поле.
    – Sorpok
    4 апр 2019 в 12:47
  • Еще один из вариантов: - ссылка
    – Pedro404
    7 апр 2019 в 12:08
1

Еще один из вариантов:

document.oninput = function() {
var input = document.querySelector('.input-0');
input.value = input.value.replace (/\D/g, '');
}
<input type="text" class="input-0">

Вариант без JavaScript:

  <label for="quantity">Количество (от 1 до 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.