Select2.js - поиск ввода, чтобы разрешить только цифры - PullRequest
Новая
       34

Select2.js - поиск ввода, чтобы разрешить только цифры

0 голосов
/ 04 июня 2018

Я борюсь с этим уже один день, возможно, это действительно легко решить.

Мне нужно, чтобы поле поиска принимало только числа, поэтому я попробовал что-то вроде этого:

enter image description here

function onlyNumbers(){
  $('.select2-search__field').on('keypress', function () {
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if ((event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
  });
}

function select2(){
  $(".select2From").select2({
    tags: true,
    placeholder: "de",
    allowClear: true
  });
  $(".select2To").select2({
    tags: true,
    placeholder: "até",
    allowClear: true
  });
}

Но это не работает ... на самом деле я даже не могу добраться до '.select2-search__field'.Неважно, нажали ли вы на клавишу, на изменение, на щелчок, на что-то ... Я просто хочу знать, как я могу получить к этому вводу, чтобы я мог фильтровать текст на входе.

Надеюсь, вы можетеПомоги мне.Спасибо!

1 Ответ

0 голосов
/ 04 июня 2018

Для динамически генерируемых элементов привязать событие к статическому DOM. 

$(".select2").select2({
    tags: true,
    placeholder: "de",
    allowClear: true
});

$(document).on('keypress', '.select2-search__field', function () {
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if ((event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class='select2' style='min-width: 100px;'>
  <option/>
  <option>100</option>
  <option>200</option>
  <option>300</option>
</select>
...