Javascript，focus()函数不能使输入框获得焦点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript，focus()函数不能使输入框获得焦点相关的知识，希望对你有一定的参考价值。
代码如下：【纯html+javascript】
<html>
<head>
<title>notitle</title>
</head>
<script language="javascript">
function ai()
if (event.keyCode ==13)
document.getElementById('ad').innerHTML+="input:<input type='text' name='bb' id='bb' onkeypress='ai()'/><br>";
document.getElementById('bb').focus();
</script>
<body onload="document.getElementById('aa').focus();">
<form id="form1" name="form1" method="post" action="2.asp">
<div id="ad">
input:<input type="text" name="aa" id="aa" onkeypress="ai()"/> <br>
</div>
<input type="button" name="button" id="button" value="submit" onclick="document.getElementById('bb').focus();" />
<input type="text" name="textfield" style="visibility:hidden" />
</form>
</body>
</html>
在页面第一个输入框里按下回车后，可以增加一个输入框，但是却不能让新增的输入框获得焦点。
从代码实现角度来说：第一个输入框有按键盘动作后，触发Javascript函数ai()，此函数检查键盘动作，若是回车，则使用InnerHTML追加一个输入框，此新输入框的id和name都是"bb"，然后，执行Javascript语句：document.getElementById('bb').focus();
按理说，应该能把bb输入框（也就是新增的输入框）得到焦点，但是实际运行中不能获得输入焦点。
请大侠指点指点。
我在csdn上看到高手的解决方案了，大家可以参考下：
function ai()
if (event.keyCode ==13)
var frag = document.createDocumentFragment();
var tag = document.createTextNode("input:");
var input = document.createElement("input");
input.type="text";
input.name="bb";
input.id="bb";
input.onkeypress = ai;
var br = document.createElement("br");
frag.appendChild(tag);
frag.appendChild(input);
frag.appendChild(br);
document.getElementById("ad").appendChild(frag);
document.getElementById('bb').focus();
一楼的也谢谢你啦
当你使用innerHTML的时候dom 会重绘，重绘意味着那些focus全部不起作用。
至于为什么appendChild 可以呢，是因为你添加的节点不会影响其他的节点。不会造成重绘。
重绘是需要时间的，所以问题就这么产生了。 参考技术A 写的太多看起来比较麻烦，我简单的写下我的方法
input:<input id=a>
<input id=b>
<script language='javascript'>
a.focus()
a.onkeyup=function()if(event.keyCode==13)setTimeout('b.focus()',1)/*注意这句,onkeyup之后的焦点会在当前元素，解决方法就是延迟1会儿*/
</script>
.focus() 不是函数[关闭]
【中文标题】.focus() 不是函数[关闭]【英文标题】：.focus() is not a function [closed] 【发布时间】：2020-04-02 17:14:30 【问题描述】：我一直试图将输入字段从一个更改为另一个无济于事，当我使用 .focus 时，它给我一个错误，它不是一个函数。
我将粘贴我的代码
import React, useEffect from 'react';
import signup from '../../assets/images';
import FormDiv from '../shared/Sign-in-div';
import ImageDiv from '../shared/Image-div';
import Nunito32, Nunito20 from '../shared/nunito/nunito';
import ImageContainer from '../shared/image-container';
import OtpField from '../shared/otp-field';
import PinkButton from '../shared/button-color-pink';
const SignUpVerification = () =>
const fieldOne = React.createRef();
const fieldTwo = React.createRef();
const fieldThree = React.createRef();
const fieldFour = React.createRef();
return (
<div style= display: 'flex' >
<FormDiv style= textAlign: 'center' >
<Nunito32
style=
display: 'inline-block',
textAlign: 'center',
marginRight: 236,
marginLeft: 200,
>
Verify your mobile number by entering the code we sent you
</Nunito32>
<div style= flexDirection: 'row' >
<OtpField
ref=fieldOne
style= marginRight: 10.5
onChange=() => fieldTwo.focus()
/>
<OtpField
ref=fieldTwo
style= marginRight: 10.5
onChange=() => fieldThree.focus()
/>
<OtpField
ref=fieldThree
style= marginRight: 10.5
onChange=() => fieldFour.focus()
/>
<OtpField
ref=fieldFour
style= marginRight: 10.5
onChange=() => fieldFour.focus()
/>
</div>
<PinkButton style= marginTop: 75 >Continue</PinkButton>
<Nunito20>Send again</Nunito20>
</FormDiv>
<ImageContainer>
<ImageDiv bg=signup src=signup />
</ImageContainer>
</div>
);
;
export default SignUpVerification;
有人可以帮忙吗？如果你知道更好的方法，我会很感激你带领我走上正确的道路
【问题讨论】：
fieldTwo.current.focus()?
你是最棒的
这能回答你的问题吗？ how react programmatically focus input
我还有一个问题：``` const fieldOne = React.createRef(); const fieldTwo = React.createRef();常量 fieldThree = React.createRef();常量 fieldFour = React.createRef(); ```我怎么能做到一句话？
【参考方案1】：
根据docs
当 ref 被传递给 render 中的元素时，对节点的引用可以在 ref 的当前属性处访问。
所以尝试使用field.current.focus()
【讨论】：
【参考方案2】：既然你有一个功能组件，你应该使用useRef。 createRef 将在每次渲染时创建一个新引用。
https://reactjs.org/docs/hooks-reference.html#useref
该引用还将公开一个属性current，您必须使用它来设置焦点。
const fieldOne = useRef(null);
...
<OtpField
ref=fieldOne
style= marginRight: 10.5
onChange=() => fieldTwo.current.focus()
/>
<OtpField
ref=fieldTwo
style= marginRight: 10.5
onChange=() => fieldThree.current.focus()
/>
【讨论】：
我不知道如何在我自己的用例中实现它 用const field = React.useRef(null)替换const fieldOne = React.createRef();以上是关于Javascript，focus()函数不能使输入框获得焦点的主要内容，如果未能解决你的问题，请参考以下文章
移动 Safari：输入字段上的 Javascript focus() 方法仅适用于点击？
是否可以使用 JavaScript focus() 函数专注于 <div> ？