简单表单中JavaScript focus()方法失效问题求助

问题原因 #

你的代码里，<a>标签的href="#dig3"会在点击后触发浏览器的锚点跳转行为——浏览器会自动将焦点定位到#dig3这个div元素上，这直接覆盖了你在autoFill函数中给#lbs输入框设置的焦点。而函数外部调用focus()不受影响，是因为没有触发锚点跳转的干扰。

解决方案 #

方案1：阻止a标签的默认跳转行为 #

修改<a>标签的onClick属性，将return true改为return false，阻止浏览器执行锚点跳转，让focus()正常生效：

<body>
    <div class="box-3 " id="dig3">
    <a href="#dig3" onClick="autoFill('dig3'); return false;" >Auto Fill</a><br><br>
    <div>length: <input type="number" size="40" id="length" name="length" required /></div>
    <div>width: <input type="number" id="width" name="width" required /></div>
    <div>height: <input type="number" id="height" name="height" required /></div>
    <div>lb: <input type="number" id="lbs" name="lbs" required /></div>
    <div>oz: <input type="number" id="oz" name="oz" required /></div>

<script>
function autoFill(digID) {
document.querySelector(`#${digID} #length`).value = "15";
document.querySelector(`#${digID} #width`).value = "12";
document.querySelector(`#${digID} #height`).value = "3";

document.querySelector(`#${digID} #lbs`).focus();
}

//document.querySelector("#dig3 #lbs").focus();
</script>
</body>

方案2：修改a标签的href属性 #

如果不需要锚点跳转功能，可把href="#dig3"改成href="javascript:void(0)"，同样能避免默认的焦点抢夺：

<a href="javascript:void(0)" onClick="autoFill('dig3');" >Auto Fill</a>

（若直接移除href属性，a标签会失去默认链接样式，需额外用CSS调整）

内容的提问来源于stack exchange，提问作者Maude Rozencrance's Cat