时间戳

首页 > 解决方案 > 当在字段中按下 Enter 时，以编程方式模拟对元素的单击

javascript - 当在字段中按下 Enter 时，以编程方式模拟对元素的单击

问题描述

我的html：

<div class="container">
  <div class="row d-none d-md-block d-xl-none" id="PrescriptionTitle">
      <div class="col-sm-6">
          <span for="" class="text-left">Brand Name</span>
      </div>
      <div class="col-sm-6">
          <span for="">Generic name</span>
      </div>
      <div class="col-sm-2">
          <span for="">Dose</span>
      </div>
      <div class="col-sm-2">
          <span for="">Units</span>
      </div>
      <div class="col-sm-3 col-sm-offset-5">
          <span class="text-nowrap" for="">Frequency</span>
      </div>
      <div class="col-sm-1">
          <span for="">Durn</span>
      </div>
      <div class="col-sm-2">
          <span for="inputEmail4">Units</span>
      </div>
  </div>


      <div class="row DrugRow" id="DrugRow1">
            <div class="col-sm-6">
              <input type="text" id="brand1" class="form-control BrandName input-sm ui-autocomplete-input" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
            </div>
            <div class="col-sm-6">
              <input type="text" id="generic1" class="form-control GenericName input-sm ui-autocomplete-input" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="dose1" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="doseunits1" class="form-control DoseUnits input-sm ui-autocomplete-input" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
            </div>
            <div class="col-sm-3">
              <input type="text" id="freq1" class="form-control Frequency input-sm ui-autocomplete-input" placeholder="OD" aria-label="Frequency" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="durn1" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="durnunit1" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="">
            </div>
            <div class="col-sm-1">
              <a id="DelRow1" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
            </div>

      </div>
<div class="row DrugRow" id="DrugRow2">
<div class="col-sm-6">
  <input type="text" id="brand2" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
  <input type="text" id="generic2" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="dose2" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="doseunits2" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
  <input type="text" id="freq2" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="durn2" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="durnunit2" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="" autocomplete="off">
</div>
<div class="col-sm-1">
  <a id="DelRow2" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>

<div class="row">
<div class="col-sm-23"></div>
<div class="col-sm-1">
  <a id="AddRow1" class="btn btn-primary btn-large AddRow" href="#" tabindex="5"><i class="fa fa-plus-circle fa-lg"></i></a>
</div>
</div>

</div>

Javascript代码片段：

var $input = $('input[type=text]');
$input.on('keyup', function (e) {
  var myClass = $(this).attr("class");
  console.log(myClass);
  if (myClass.indexOf("DurationUnits") != -1) {         
    $(this).siblings('.AddRow').click();
    return true;
  }
  // DurationUnits
  if (e.which === 13) {
    var ind = $input.index(this);
    $input.eq(ind + 1).focus()
  }
}); 
$('body').on('click', '.AddRow', function() {
// $("#DiscardModal").modal();
console.log("Clicked Add Row");
var id = 0;
var count = 0;
var IdList=[];
$(".DrugRow").each(function() {
  id = $(this).attr('id');
  count = id.replace("DrugRow", "");
});
var lastelementcount = count;
console.log("Last element count is " + lastelementcount);
count++;
var NewHTML = `
<div class="row DrugRow" id="DrugRow` + count + `">
    <div class="col-sm-6">
      <input type="text" id="brand` + count + `" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
    </div>
    <div class="col-sm-6">
      <input type="text" id="generic` + count + `" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="dose` + count + `" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="doseunits` + count + `" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
    </div>
    <div class="col-sm-3">
      <input type="text" id="freq` + count + `" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="durn` + count + `" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="durnunit` + count + `" class="form-control DurationUnits input-sm" placeholder="days" aria-label="DurationUnits" aria-describedby="">
    </div>
    <div class="col-sm-1">
      <a id="DelRow` + count + `" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
    </div>
</div>
`;
$("#DrugRow" + lastelementcount).after(NewHTML);
event.preventDefault();
return false;
});

我需要在按 Enter 键时移至下一个输入字段。我已经成功地做到了。当我来到一行中的最后一个输入字段（它有一个 DurationUnits 类）时，我需要模拟单击具有一个 AddRow 类的相邻按钮。这是一个元素，单击它会通过 javascript 代码创建一些元素（已经完成）。

什么不工作是模拟点击时从输入与类 DurationUnits 按下输入的代码

标签： javascriptjquerybootstrap-4

解决方案

这是因为如果它具有类“DurationUnits”，则返回 true。return 停止函数执行后面的条件 (e.which === 13)

  if (myClass.indexOf("DurationUnits") != -1) {         
    ....
    return true;
  }
  // On class "DurationUnits" this won't run:
  if (e.which === 13) {
    ....
  }

推荐阅读