gpt4 book ai didi

jquery - 输入输入时,页面在移动设备上向上滚动?

转载 作者:行者123 更新时间:2023-11-28 07:03:55 26 4
gpt4 key购买 nike

我正在创建一个单页网站,每个部分占据整个视口(viewport)的高度和宽度(100vw 和 100vw),对于移动屏幕,我使用媒体查询来调整高度以便内容适合,问题是,一个section 有一个表单,当用户输入 input 时,页面向上滚动或有时向下滚动?

我不知道为什么会这样?

此表单的 HTML 是:

    <section id="quote">
<div id="ugallerys" class="uparrow"><img class="centerimage img-responsive" src="images/up.png" />
</div>
<div class="box">
<div class="fwidth container-fluid">
<div class="row">
<div class="col-md-12">
<div id="contentquote">
<form method="POST" id="quoteform">
<div class="form centerfield">
<div class="heading white lesspace">Quote</div>
<hr>
<label for="Full Name">
<h4 class="white center">Full Name</h4>
</label>
<input type="text" class="form-control centerfield lwidth" id="name" onFocus="window.scrollTo(0, 0);" name="name" placeholder="e.g Tom Jones" />
<br />
<div class="centerfield lwidth">
<label for="Book Out Date">
<h4 class="white">Pickup Date</h4>
</label>
<input type="date" class="form-control" onFocus="window.scrollTo(0, 0);" id="bookoutdate" name="bookoutdate" />
</div>
<div class="centerfield lwidth">
<label for="Book In Date">
<h4 class="white">Dropoff Date</h4>
</label>
<input type="date" class="form-control" id="bookindate" name="bookindate" />
</div>
<div class="centerfield lwidth">
<h1><span id="days">0</span> Days</h1>
<hr>
</div>
<div class="centerfield lwidth">
<label for="Age">
<h4 class="white">Age</h4>
</label>
<input type="number" class="form-control" placeholder="e.g. 18" id="age" name="age" />
</div>
<div class="centerfield lwidth">
<label for="Email">
<h4 class="white">Email</h4>
</label>
<input type="email" class="form-control" placeholder="e.g. tomjones@demo.com" id="email" name="email" />
</div>
<div class="centerfield lwidth">
<label for="Contact">
<h4 class="white">Contact Number</h4>
</label>
<input type="number" class="form-control" placeholder="e.g. 03375664399" id="number" name="number" />
</div>
<div class="centerfield lwidth">
<label for="Comments">
<h4 class="white">Comments</h4>
</label>
<textarea class="form-control" id="comments" name="comments"></textarea>
</div>
<div class="toppadding centerfield">
<input type="submit" class="btn btn-success btn-lg" value="Send" name="submit" />
</div>
</div>
</form>
</div>
</div>

</div>
</div>
</div>
<div id="dcontact" class="downarrowsp3"><img class="centerimage img-responsive" src="images/down.png" />
</div>
</section>

这部分的 CSS 是:

    #quote {
height: 210vh !important;
overflow:hidden;
width: 100vw !important;
background-color: #000000;
margin:0px !important;
padding:0px !important;
}

这是网站本身的链接:http://www.a1phantom.com/

最佳答案

在您的文本字段上,您有以下操作

<input type="text" class="form-control centerfield lwidth" id="name" 
onfocus="window.scrollTo(0, 0);"
name="name" placeholder="e.g Tom Jones">

onfocus="window.scrollTo(0, 0);" 属性导致您的页面在文本字段的焦点上滚动

关于jquery - 输入输入时,页面在移动设备上向上滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33067356/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com