javascript - 如何获取用户输入的输入的特定 ID

Question

我有一个带有一些文本输入和一个选择选项的表单，我想在用户执行按键事件或更改选择选项中的选择时提醒输入 ID。

最好的方法是什么？现在我正在为每个函数编写一个函数:(

到目前为止我的错误代码:

$( "#target" ).keyup(function() {
alert( this.id );
});

这是我的表格:

<form>
<div class="col-md-6">
<div class="form-group">
  <input type="text" class="form-control input-lg" name="FirstName" id="FirstName" placeholder="First Name" maxlength="45" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
  <input type="text" class="form-control input-lg" name="LastName" id="LastName" maxlength="45" placeholder="Last Name" required="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
  <input type="email" class="form-control input-lg" name="Email" id="Email" maxlength="255" placeholder="Email Address" required="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
  <input type="password" id="Password" name="Password" maxlength="32" class="form-control input-lg" placeholder="Password" required="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
  <select id="countryData" class="form-control bfh-countries" data-country="US">
    <option value=""></option>
    <option value="AF">Afghanistan</option>
    <option value="BR">Brazil</option>
  </select>
 </div>
 </div>
</form>

Answer 1

您可以对输入字段使用输入事件，对选择字段使用更改事件:

$(function () {
  $("input").on('input', function() {
    console.log( this.id );
  });
  $("select").on('change', function() {
    console.log( this.id );
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form>
    <div class="col-md-6">
        <div class="form-group">
            <input type="text" class="form-control input-lg" name="FirstName" id="FirstName" placeholder="First Name" maxlength="45" required="">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <input type="text" class="form-control input-lg" name="LastName" id="LastName" maxlength="45" placeholder="Last Name" required="">
        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <input type="email" class="form-control input-lg" name="Email" id="Email" maxlength="255" placeholder="Email Address" required="">
        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <input type="password" id="Password" name="Password" maxlength="32" class="form-control input-lg" placeholder="Password" required="">
        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <select id="countryData" class="form-control bfh-countries" data-country="US">
                <option value=""></option>
                <option value="AF">Afghanistan</option>
                <option value="BR">Brazil</option>
            </select>
        </div>
    </div>
</form>