Select2.js - 搜索输入以仅允许数字

Posted 2023-05-07

【中文标题】Select2.js - 搜索输入以仅允许数字

【英文标题】：Select2.js - Search input to allow only numbers

【发布时间】：2018-11-13 23:39:39

【问题描述】：

我正在为此苦苦挣扎一天，可能真的很容易解决。

我想要的是只接受数字的搜索字段，所以我尝试了这样的事情：

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】：

对于动态生成的项目，将事件绑定到静态 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>