Как сохранить фокус на вводе первого поля

Question

У меня была небольшая сложная задача, которую я почти выполнил, но застрял только в одном месте

Что я делаю

• у меня есть 3 поля ввода в моем пользовательском интерфейсе, за которыми следует таблица HTML, поле ввода - это простое поле ввода, в которое пользователь собирается что-то ввести
• В моей HTML-таблице у меня есть несколько полей ввода, чтобы получить ввод от пользователя, изначально есть только одна строка, в которой первый столбец autocomplete, из которого пользователь выбирает некоторые данные, и в соответствии с этим я заполняю следующие столбцы этого строки
• Когда в моем случае есть последнее поле ввода, это Disc%, поэтому, когда пользователь focusout из этого я создаю новую строку с той же функциональностью, и фокус должен сместиться на первый столбец этой новой строки, который является itemName

Что у меня за проблема

• Когда я загружаю страницу, фокус автоматически делается на itemName, который находится внутри таблицы, которую я не хочу

• когда страница загружается, фокус должен быть сначала на поле ввода вне таблицы, затем, если это последнее поле ввода за пределами таблицы после focusout, оно должно идти в поле ввода таблицы

• В моем коде я думаю setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100); эта строка вызывает проблемы, потому что когда пользователь focusout из последнего поля ввода таблицы HTML, я создаю новую строку и смещаю фокус на первый столбец новой строки

• Я прокомментировал строку, где я думаю, что проблема

"use strict";
console.clear()


const data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]

const data1 = { // this data will be dynamic but for now to test i am using this single data
  butter: {
    "ItemName": "Butter",
    "ItemCode": 400564,
    "PurRate": 8,
    "DiscAmt": 6,
    "gstPercentage": 35,
    "gstAmt": 5
  },
  rice: {
    "ItemName": "Rice",
    "ItemCode": 400565,
    "PurRate": 3,
    "DiscAmt": 2,
    "gstPercentage": 20,
    "gstAmt": 8
  },
  milk: {
    "ItemName": "Milk",
    "ItemCode": 200569,
    "PurRate": 1,
    "DiscAmt": 1,
    "gstPercentage": 50,
    "gstAmt": 2
  },
  'ice cream': {
    "ItemName": "Ice cream",
    "ItemCode": 800002,
    "PurRate": 16,
    "DiscAmt": 2,
    "gstPercentage": 15,
    "gstAmt": 2
  },
  curd: {
    "ItemName": "Curd",
    "ItemCode": 100289,
    "PurRate": 9,
    "DiscAmt": 1,
    "gstPercentage": 12,
    "gstAmt": 4
  },
}

var totalAmount = "";
var unitQuantity = "";

$("#supplierInput").on('input', function() {
  myCode();
});

function myCode() {
  function rowappend(tbody) { // this one is appending row{

    const markup =
      `<tr>
  <td>
    <input type="text" class="form-control commantd" name="itemNametd">
  </td>
  <td name="itemCodetd" class="commantd"></td>
  <td>
    <input type="text" class="form-control commantd" name="unitQtytd">
  </td>
  <td name="purRatetd" class="commantd"></td>
  <td>
    <input type="text" class="form-control commantd" name="discPercentagetd">
  </td>
  <td name="discAmttd" class="commantd"></td> 
  <td name="gstPercentagetd" class="commantd"></td>
  <td name="gstAmttd" class="commantd"></td>
  <td name="totalAmttd" class="commantd"></td>
  
</tr>`

    $(tbody).append(markup);
    setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

    const itemName = data.map(value => { //using autocomplete to for searching input field
      return value.ItemName;
    });
    $("[name=itemNametd]", tbody).last().autocomplete({
      source: itemName
    });
  }
  rowappend($('tbody', '#tableInvoice'))


  function getValues(row) {
    const search = ($('[name=itemNametd]', row).val()).toString()
    const value = data1[search.toLowerCase()];
    if (value) {
      $(row).find("[name=itemCodetd]").text(value.ItemCode);
      $(row).find("[name=purRatetd]").text(value.PurRate);
      $(row).find("[name=discAmttd]").text(value.DiscAmt);
      $(row).find("[name=gstPercentahgetd]").text(value.gstPercentage);
      $(row).find("[name=gstAmttd]").text(value.gstAmt);
    }
  }



  function calc(row) {
    const unitQuantity = $(row).find("[name=unitQtytd]").val();
    const purchaseRate = $(row).find("[name=purRatetd]").text();
    const totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));

    $(row).find("[name=totalAmttd]").text(totalAmount);

  }

  $(document).on('focusout', (e) => {
    const row = e.target.parentElement.parentElement
    if (e.target.matches('[name=discPercentagetd]')) {
      if ($(row).parent().find('tr').length - $(row).index() === 1) { // only last row
        rowappend(e.target.parentElement.parentElement.parentElement)
      }
    }

    if (e.target.matches('[name=unitQtytd]')) {
      calc(e.target.parentElement.parentElement)
    }

    if (e.target.matches("[name=itemNametd]")) {
      getValues(e.target.parentElement.parentElement)
    }

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="container commonDivInvoice">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="dcNoInput">DC No</label> <input type="text" class="form-control" name="dcNoInput" id="dcNoInput">
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="supplierInput">Supplier</label> <input list="supplierInputList" id="supplierInput" class="form-control custom-select ">
      <datalist id="supplierInputList">
  <option>1</option>
  <option>2</option>
						</datalist>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="dcInput">DC Input</label> <input type="text" class="form-control" name="dcInput" id="dcInput">
    </div>




  </div>
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>
        </tr>
      </thead>
      <tbody>

      </tbody>

    </table>

  </div>
</div>

Редактировать / обновить

• Я отредактировал свой код с правильными данными. У меня есть тег datalist, поэтому при изменении я создаю строку таблицы, поэтому при изменении datalist фокус смещается на первый столбец строки таблицы * 1059. *
• В моей реальной структуре, подобной этой, после datalist У меня так много полей ввода, которые нужно заполнить, и я хочу перейти к таблице

Answer 1

Просто используйте $("#dcNoInput").focus(), 100);, чтобы сфокусироваться на этом текстовом поле.

Я получил элемент textbox с его идентификатором и использовал .focus().

"use strict";
console.clear()
$("#dcNoInput").focus();

const data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]

const data1 = { // this data will be dynamic but for now to test i am using this single data
  butter: {
    "ItemName": "Butter",
    "ItemCode": 400564,
    "PurRate": 8,
    "DiscAmt": 6,
    "gstPercentage": 35,
    "gstAmt": 5
  },
  rice: {
    "ItemName": "Rice",
    "ItemCode": 400565,
    "PurRate": 3,
    "DiscAmt": 2,
    "gstPercentage": 20,
    "gstAmt": 8
  },
  milk: {
    "ItemName": "Milk",
    "ItemCode": 200569,
    "PurRate": 1,
    "DiscAmt": 1,
    "gstPercentage": 50,
    "gstAmt": 2
  },
  'ice cream': {
    "ItemName": "Ice cream",
    "ItemCode": 800002,
    "PurRate": 16,
    "DiscAmt": 2,
    "gstPercentage": 15,
    "gstAmt": 2
  },
  curd: {
    "ItemName": "Curd",
    "ItemCode": 100289,
    "PurRate": 9,
    "DiscAmt": 1,
    "gstPercentage": 12,
    "gstAmt": 4
  },
}

var totalAmount = "";
var unitQuantity = "";

$("#supplierInput").on('input', function() {
  var dcInput = $("#dcInput").val();

    myCode();
  if(!dcInput){
    setTimeout(() => $("#dcInput").focus(), 110);
  }
});

function myCode() {
  function rowappend(tbody) { // this one is appending row{

    const markup =
      `<tr>
  <td>
    <input type="text" class="form-control commantd" name="itemNametd">
  </td>
  <td name="itemCodetd" class="commantd"></td>
  <td>
    <input type="text" class="form-control commantd" name="unitQtytd">
  </td>
  <td name="purRatetd" class="commantd"></td>
  <td>
    <input type="text" class="form-control commantd" name="discPercentagetd">
  </td>
  <td name="discAmttd" class="commantd"></td> 
  <td name="gstPercentagetd" class="commantd"></td>
  <td name="gstAmttd" class="commantd"></td>
  <td name="totalAmttd" class="commantd"></td>
  
</tr>`

    $(tbody).append(markup);
    setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

    const itemName = data.map(value => { //using autocomplete to for searching input field
      return value.ItemName;
    });
    $("[name=itemNametd]", tbody).last().autocomplete({
      source: itemName
    });
  }
  rowappend($('tbody', '#tableInvoice'))


  function getValues(row) {
    const search = ($('[name=itemNametd]', row).val()).toString()
    const value = data1[search.toLowerCase()];
    if (value) {
      $(row).find("[name=itemCodetd]").text(value.ItemCode);
      $(row).find("[name=purRatetd]").text(value.PurRate);
      $(row).find("[name=discAmttd]").text(value.DiscAmt);
      $(row).find("[name=gstPercentahgetd]").text(value.gstPercentage);
      $(row).find("[name=gstAmttd]").text(value.gstAmt);
    }
  }



  function calc(row) {
    const unitQuantity = $(row).find("[name=unitQtytd]").val();
    const purchaseRate = $(row).find("[name=purRatetd]").text();
    const totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));

    $(row).find("[name=totalAmttd]").text(totalAmount);

  }

  $(document).on('focusout', (e) => {
    const row = e.target.parentElement.parentElement
    if (e.target.matches('[name=discPercentagetd]')) {
      if ($(row).parent().find('tr').length - $(row).index() === 1) { // only last row
        rowappend(e.target.parentElement.parentElement.parentElement)
      }
    }

    if (e.target.matches('[name=unitQtytd]')) {
      calc(e.target.parentElement.parentElement)
    }

    if (e.target.matches("[name=itemNametd]")) {
      getValues(e.target.parentElement.parentElement)
    }

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="container commonDivInvoice">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="dcNoInput">DC No</label> <input type="text" class="form-control" name="dcNoInput" id="dcNoInput">
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="supplierInput">Supplier</label> <input list="supplierInputList" id="supplierInput" class="form-control custom-select ">
      <datalist id="supplierInputList">
  <option>1</option>
  <option>2</option>
						</datalist>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="dcInput">DC Input</label> <input type="text" class="form-control" name="dcInput" id="dcInput">
    </div>




  </div>
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>
        </tr>
      </thead>
      <tbody>

      </tbody>

    </table>

  </div>
</div>

Answer 2

Очень просто. Напишите эту строку кода внутри document.ready () и дайте мне знать.

$("#YourFormId").find('input[type="text"]').first().focus();