检查输入是否包含#

Question

在我的表格中，我有 10-15 个 input 具有相同的 class （它是动态的，由我的 nested_forms 申请制作）.

我的表格：

<h1 id="error"></h1>
<form>

<input class="maps_input" type="text" name="map[maps_attributes][1489492164895][link]" id="maps_attributes_1489492164895_link">

<input class="maps_input" type="text" name="map[maps_attributes][7192817201001][link]" id="maps_attributes_7192817201001_link">

<input class="maps_input" type="text" name="map[maps_attributes][1701829110864][link]" id="maps_attributes_1701829110864_link">

<input class="maps_input" type="text" name="map[maps_attributes][9918271627198][link]" id="maps_attributes_9918271627198_link">

// & more

</form>

用户会将链接粘贴到这些 inputs 并且我正在尝试检查是否有任何链接包含 #。

I used this solution，但问题是，它只检查第一个 input 而不是其余的

这是我试过的：

// 1
$( "input.maps_input" ).change(function() {
  $("input.maps_input").each(function(){
    if ($('input.maps_input').val().indexOf('#') > -1) {
      $('#error').text('Has #');
    }
  });
});

&

//2
$("input.maps_input").each(function(){
  $( "input.maps_input" ).change(function() {
    if ($('input.maps_input').val().indexOf('#') > -1) {
      $('#error').text('Has #');
    }
  });
});

我哪里做错了？

Answer 1

如果我正确理解你的问题，这可能会解决你的问题

$('body').on('change', "input.maps_input", function() {
  if ($(this).val().indexOf('#') > -1) {
    $('#error').text('Has #');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="error"></h1>
<form>
  <input class="maps_input" type="text" name="map[maps_attributes][1489492164895][link]" id="maps_attributes_1489492164895_link">
  <input class="maps_input" type="text" name="map[maps_attributes][7192817201001][link]" id="maps_attributes_7192817201001_link">
  <input class="maps_input" type="text" name="map[maps_attributes][1701829110864][link]" id="maps_attributes_1701829110864_link">
  <input class="maps_input" type="text" name="map[maps_attributes][9918271627198][link]" id="maps_attributes_9918271627198_link"> // & more
</form>

Answer 2

Samuel 代码可以工作，我想补充解释原因，以便您了解哪里出了问题，

在你的 .each 循环中你尝试使用 $('input.maps_input').val() ，并且由于有多个对象，所以每次只使用第一个，所以在 jquery.each 内部，最好使用 $(this) 访问您正在迭代的完全相同的项目

Answer 3

使用 focusout .

$("input.maps_input").focusout(function() {
  if ($(this).val().indexOf('#') > -1) {
        $('#error').text('Has #');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="error"></h1>
<form>
  <input class="maps_input" type="text" name="map[maps_attributes][1489492164895][link]" id="maps_attributes_1489492164895_link">
  <input class="maps_input" type="text" name="map[maps_attributes][7192817201001][link]" id="maps_attributes_7192817201001_link">
  <input class="maps_input" type="text" name="map[maps_attributes][1701829110864][link]" id="maps_attributes_1701829110864_link">
  <input class="maps_input" type="text" name="map[maps_attributes][9918271627198][link]" id="maps_attributes_9918271627198_link"> // & more
</form>

检查输入是否包含#

Check if inputs contain #

each

jquery

input

contains

indexof