Question

我在iframe中有表单HTML。表单问题是当您在已填充元素上使用Tab键时页面正在滚动。防爆。在名称字段中填写姓名，然后填写电子邮件，然后再次转到名称字段，然后按Tab键。您可以注意到该页面正在滚动。这是一个非常奇怪的问题，当我从上面的iframe中删除两个或三个br时，它工作正常。

这是我的HTML。

表单HTML

<form id="UserForm">
            <fieldset>          
            <div class="FormField">
            <p class="clear clearfix">
            <span class="PosRelative">
            <input type="text" name="Name" class="required InpFormat" placeholder="* Name" tabindex="1"> <span class="CheckMark"></span>

            </span>
            <span class="PosRelative FloatNone">
            <input type="text" class="required InpFormat noSpace" name="Email" placeholder="* Email" tabindex="2"><span class="CheckMark" ></span>
            </span>

            </p>
            <p class="clear clearfix">
            <span class="PosRelative FloatNone">
                <input type="text" class="required InpFormat" name="Mobile" placeholder="* Mobile" tabindex="3"><span class="CheckMark"></span>            
            </span>
            </p>

            <div>
                <input type="submit" value="Contact" class="btn">                

            </div>
            </div>              
            </fieldset>
            </form>

页面HTML

 <body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<iframe src="form.html" frameborder="0" width="100%" height="280" scrolling="no"></iframe>   
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>

Answer 1

将position: fixed添加到包含表单的元素。

Answer 2

使用tabindex。像：

<input type="text" tabindex=1> <input type="text" tabindex=2>

在仅表单元素chrome上使用Tab键时滚动页面

2 个答案: