jQuery .val() 为输入元素返回一个空字符串

Question

我在 div 中有几个输入元素，我正在尝试使用 jQuery 来 1) 检查第一个输入的内容，如果它不是空白，则显示下一个输入，依此类推。但是，我遇到的问题是无论我在输入框中键入什么，.val() returns 在浏览器控制台中都是一个空字符串。

HTML:

<div class="col-sm-6">
  <span class="team-member-form" id="team-member-1-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-2-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-3-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-4-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-5-form">
    <input class="form-control" type="text"></input>
    <br/>
  
</div>

Javascript:

 $('.team-member-form').on('keyup', function() {
                var teamMemberForm = $(this).attr('id');
                var teamMemberNumber = teamMemberForm.split('-')[2];
                var teamMemberFormValue = $(this).val();
                console.log(teamMemberFormValue);

所以无论我在输入中键入什么，console.log 都只是一个空字符串。有什么想法吗？

Answer 1

我们需要将 keyup 事件附加到输入元素。目前它附在 span.

我包含了一个代码片段，它将 keyup 绑定到 .form-control。

$('.team-member-form .form-control').on('keyup', function() {
  var teamMemberFormValue = $(this).val();
  console.log(teamMemberFormValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <span class="team-member-form" id="team-member-1-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-2-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-3-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-4-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-5-form">
    <input class="form-control" type="text"></input>
    <br/>
  
</div>

Answer 2

考虑以下示例。

$(function() {
  $('.team-member-form > input').on('keyup', function() {
    var teamMemberForm = $(this).parent().attr('id');
    var teamMemberNumber = teamMemberForm.split('-')[2];
    var teamMemberFormValue = $(this).val();
    console.log(teamMemberFormValue);
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <div class="team-member-form" id="team-member-1-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-2-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-3-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-4-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-5-form">
    <input class="form-control" type="text" />
  </div>
</div>

您的代码实践很差 HTML。您的 <span> 标签已打开，但尚未关闭。当不需要时，您还为 <input> 设置了结束标记。我将它们更改为 <div> 并首先清理了 HTML。

现在，对于 jQuery，我们将 select 或首先调整为 select <input> 元素。这将有助于 keyup 事件，但会给 this 一个不同的参考。我们可以使用 .parent() 到 select 父元素并获得 id 属性。

Answer 3

如果你不想使用 jQuery 你也可以使用纯 JS

document.querySelectorAll('.team-member-form .form-control').forEach(element => {
  element.addEventListener('keyup', e => {
    console.log(e.value)
  })
})

jQuery .val() 为输入元素返回一个空字符串

jQuery .val() is returning an empty string for input element

html

javascript

jquery

haml