Как получить конкретный идентификатор ввода, который пользователь нажал на него

Question

Я получил форму с некоторыми текстовыми вводами и одним из вариантов выбора, и я хочу предупредить входной идентификатор, когда пользователь выполняет предварительное форматирование события или изменения выбор в опциях выбора.

Каков наилучший способ для этого? сейчас я пишу функцию для каждого из них :(

моего плохого кода до сих пор:

$("#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>