Javascript 如何将注意力集中在输入第一个字段上

我有一个小复杂的任务要做，我几乎已经完成了，但只停留在一个地方

我在做什么

• 我的UI上有3个输入字段，后跟一个HTML表，输入字段是简单的输入字段，用户将在其中输入内容
• 在我的HTML表格中，我有几个输入字段来获取用户的输入，最初只有一行，第一列是

  autocomplete

  ，用户从中选择一些数据，并根据这些数据填充该行的下一列
• 当在我的例子中有最后一个输入字段时，它是

  Disc%

  ，因此当用户

  focusout

  从此字段创建具有相同功能的新行时，焦点应转移到新行的第一列，即

  itemName

我的问题是什么

• 当我加载页面时，焦点会自动放在我不想要的表中的itemName上

• 页面加载时，焦点应首先位于表格外侧的输入字段上，然后如果它是

  focusout

  之后tble外部的最后一个输入字段，则应位于表格的输入字段中

• 在我的代码中，我认为

  setTimeout（（）=>$（“[name=itemNametd]”，tbody.last（）.focus（），100）这一行引起了问题，因为当用户从HTML表的最后一个输入字段中选择“focusout”时，我正在创建新行，并将焦点转移到新行的第一列
  

• 我已经评论了我认为问题所在的行

“严格使用”；
控制台清除（）
const data=[//填充项目名称搜索输入字段的数据
{
“项目名称”：“黄油”
},
{
“项目名称”：“大米”
},
{
“项目名称”：“牛奶”
},
{
“商品名称”：“冰淇淋”
},
{
“项目名称”：“凝乳”
}
]
constdata1={//此数据将是动态的，但现在为了测试，我使用的是单个数据
黄油：{
“项目名称”：“黄油”，
“项目代码”：400564，
“净化”：8，
“DiscAmt”：6，
“GST百分比”：35，
“gstAmt”：5
},
大米：{
“项目名称”：“大米”，
“项目代码”：400565，
“净化”：3，
“DiscAmt”：2，
“GST百分比”：20，
“gstAmt”：8
},
牛奶：{
“项目名称”：“牛奶”，
“项目代码”：200569，
“净化”：1，
“DiscAmt”：1，
“GST百分比”：50，
“gstAmt”：2
},
“冰淇淋”：{
“商品名称”：“冰淇淋”，
“项目代码”：800002，
“PurRate”：16，
“DiscAmt”：2，
“GST百分比”：15，
“gstAmt”：2
},
凝乳：{
“项目名称”：“凝乳”，
“项目代码”：100289，
“PurRate”：9，
“DiscAmt”：1，
“GST百分比”：12，
“gstAmt”：4
},
}
var totalAmount=“”；
var unitQuantity=“”；
$（“#供应商输入”）。在（'input'，function（）上{
myCode（）；
});
函数myCode（）{
函数rowappend（tbody）{//这个函数正在追加行{
常量标记=
`
`
$（tbody）.附加（标记）；
setTimeout（（）=>$（“[name=itemNametd]”，tbody.last（）.focus（），100）；
const itemName=data.map（值=>{//使用自动完成来搜索输入字段
返回值.ItemName；
});
$（“[name=itemNametd]”，tbody.last（）.autocomplete({
来源：itemName
});
}
行附加（$（'tbody'，'#tableInvoice'））
函数getValues（行）{
常量搜索=（$（'[name=itemNametd]'，row.val（））.toString（）
const value=data1[search.toLowerCase（）]；
如果（值）{
$（行）。查找（“[name=itemCodetd]”）。文本（value.ItemCode）；
$（行）。查找（“[name=purRatetd]”）。文本（value.PurRate）；
$（行）。查找（“[name=discAmttd]”）。文本（value.DiscAmt）；
$（行）.find（“[name=gstPercentahgetd]”）。text（value.gstPercentage）；
$（行）.find（“[name=gstAmttd]”）。text（value.gstAmt）；
}
}
函数计算（行）{
const unitQuantity=$（行）.find（“[name=unitQtytd]”）val（）；
const purchaseRate=$（行）.find（“[name=purRatetd]”）。text（）；
const totalAmount=（parseInt（单位数量）*parseInt（购买率））；
$（行）。查找（“[name=totalAmttd]”）。文本（totalAmount）；
}
$（文档）.on（'focusout'，（e）=>{
常量行=e.target.parentElement.parentElement
如果（e.target.matches（'[name=discPercentagetd]'））{
if（$（row.parent（）.find（'tr'）.length-$（row.index（）==1）{//仅最后一行
行附加（e.target.parentElement.parentElement.parentElement）
}
}
如果（e.target.matches（'[name=unitQtytd]'））{
计算（如target.parentElement.parentElement）
}
if（e.target.matches（“[name=itemNametd]”）{
getValues（e.target.parentElement.parentElement）
}
});
}

DC编号
供应商
1.
2.
直流输入
项目名称
项目代码
单位数量
采购价格
光盘%
盘式自动变速器
商品及服务税%
消费税金额
总金额

只需使用

$（“#dcNoInput”）.focus（），100；

即可关注该文本框

我所做的是获取带有id的textbox元素，并使用

.focus（）

“严格使用”；
控制台清除（）
$（“#dcNoInput”）.focus（）；
const data=[//填充项目名称搜索输入字段的数据
{
“项目名称”：“黄油”
},
{
“项目名称”：“大米”
},
{
“项目名称”：“牛奶”
},
{
“商品名称”：“冰淇淋”
},
{
“项目名称”：“凝乳”
}
]
constdata1={//此数据将是动态的，但现在为了测试，我使用的是单个数据
黄油：{
“项目名称”：“黄油”，
“项目代码”：400564，
“净化”：8，
“DiscAmt”：6，
“GST百分比”：35，
“gstAmt”：5
},
大米：{
“项目名称”：“大米”，
“项目代码”：400565，
“净化”：3，
“DiscAmt”：2，
“GST百分比”：20，
“gstAmt”：8
},
牛奶：{
“项目名称”：“牛奶”，
“项目代码”：200569，
“净化”：1，
“DiscAmt”：1，
“GST百分比”：50，
“gstAmt”：2
},
“冰淇淋”：{
$("#YourFormId").find('input[type="text"]').first().focus();