防止<输入>在 iPhone 上滚动屏幕的元素? [英] Preventing an <input> element from scrolling the screen on iPhone?

查看：19 发布时间：2021/12/28 14:20:14 javascript iphone web-applications safari jqtouch

本文介绍了防止<输入>在 iPhone 上滚动屏幕的元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网页上有几个元素.我正在使用 jQTouch，并且我试图始终保持全屏；也就是说，水平滚动是不好的.每当我单击 <input> 元素时，页面都会向右滚动，在屏幕右侧显示一个黑色边框，并使所有内容都偏离中心.输入从屏幕左侧偏移，它们从页面中间的某处开始.

I have several <input type="number"> elements on my webpage. I'm using jQTouch, and I'm trying to stay fullscreen at all times; that is, horizontal scrolling is bad. Whenever I click an <input> element, the page scrolls right, showing a black border on the right of the screen and de-centering everything. The inputs are offset from the left of the screen, and they begin somewhere toward the middle of the page.

如何防止在焦点上滚动?

How can I prevent this scrolling on focus?

推荐答案

我刚刚在这篇文章中找到了这个问题的解决方案停止从焦点滚动页面

I just found the solution to this problem in this post Stop page scrolling from focus

只需将 onFocus="window.scrollTo(0, 0);" 添加到您的输入字段即可！(在 iPad 上用 </code> 和 <code><input type="text"/></code> 尝试过，但我很确定它会在iPhone也是.)<em class="showen"></em></p> <p class="en">Just add <code>onFocus="window.scrollTo(0, 0);"</code> to your input field and you're done! (Tried it with <code><textarea></code> and <code><input type="text" /></code> on the iPad, but I'm pretty sure it'll work on the iPhone too.)</p> <p class="cn">我担心滚动会显示为闪烁或其他东西，但幸运的是事实并非如此！<em class="showen"></em></p> <p class="en">I was afraid the scrolling would be visible as a flicker or something, but fortunately that is not the case!</p> <p>这篇关于防止<输入>在 iPhone 上滚动屏幕的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2730847');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="防止<输入>在iPhone上滚动屏幕的元素？" href="/1009336.html"> 防止<输入>在iPhone上滚动屏幕的元素？; </a> </li> <li> <a target="_blank" title="防止流体列在 iPhone 屏幕上换行" href="/2449497.html"> 防止流体列在 iPhone 屏幕上换行; </a> </li> <li> <a target="_blank" title="防止身体元素在触摸设备上滚动" href="/1108640.html"> 防止身体元素在触摸设备上滚动; </a> </li> <li> <a target="_blank" title="定位< div>元素在屏幕的中心" href="/561319.html"> 定位< div>元素在屏幕的中心; </a> </li> <li> <a target="_blank" title="防止Safari(iPhone)在表单输入上显示URL栏" href="/1499042.html"> 防止Safari(iPhone)在表单输入上显示URL栏; </a> </li> <li> <a target="_blank" title="&LT;输入&GT; Mac上的高度" href="/817919.html"> &LT;输入&GT; Mac上的高度; </a> </li> <li> <a target="_blank" title="聚焦 <input> 时防止 iphone 默认键盘" href="/2813853.html"> 聚焦 <input> 时防止 iphone 默认键盘; </a> </li> <li> <a target="_blank" title="标签到< select>输入元素在html" href="/657187.html"> 标签到< select>输入元素在html; </a> </li> <li> <a target="_blank" title="Emacs：防止在滚动屏幕时光标移动" href="/590314.html"> Emacs：防止在滚动屏幕时光标移动; </a> </li> <li> <a target="_blank" title="滚动网页上的元素以截取屏幕截图" href="/911162.html"> 滚动网页上的元素以截取屏幕截图; </a> </li> <li> <a target="_blank" title="当聚焦< input>时，防止iphone默认键盘" href="/942469.html"> 当聚焦< input>时，防止iphone默认键盘; </a> </li> <li> <a target="_blank" title="在Div元素内滚动时防止页面滚动" href="/1814719.html"> 在Div元素内滚动时防止页面滚动; </a> </li> <li> <a target="_blank" title="防止 contenteditable 添加 <div>在 ENTER 上 - Chrome" href="/2654742.html"> 防止 contenteditable 添加 <div>在 ENTER 上 - Chrome; </a> </li> <li> <a target="_blank" title="防止contenteditable添加< div>在ENTER上 - Chrome" href="/817516.html"> 防止contenteditable添加< div>在ENTER上 - Chrome; </a> </li> <li> <a target="_blank" title="如何防止滚动效果使我的屏幕在滚动时闪烁" href="/1491713.html"> 如何防止滚动效果使我的屏幕在滚动时闪烁; </a> </li> <li> <a target="_blank" title="cms:out escapeXml ＝"false":防止< br>在多行输入中" href="/1514341.html"> cms:out escapeXml ＝"false":防止< br>在多行输入中; </a> </li> <li> <a target="_blank" title="搜索引擎可以跟随<按钮>或<输入>元素？" href="/875717.html"> 搜索引擎可以跟随<按钮>或<输入>元素？; </a> </li> <li> <a target="_blank" title="如何使用< input type ='file'>在iPhone上的Safari？" href="/756082.html"> 如何使用< input type ='file'>在iPhone上的Safari？; </a> </li> <li> <a target="_blank" title="完成运行< App>在iPhone 6.1 Simulator上" href="/2140220.html"> 完成运行< App>在iPhone 6.1 Simulator上; </a> </li> <li> <a target="_blank" title="如何实现可滚动的< div>在iPad上？" href="/570992.html"> 如何实现可滚动的< div>在iPad上？; </a> </li> <li> <a target="_blank" title="位置:在< table>上的粘性(Firefox)元素" href="/1759671.html"> 位置:在< table>上的粘性(Firefox)元素; </a> </li> <li> <a target="_blank" title="< td></td>上的* ngIf和* ngFor元素" href="/1888281.html"> < td></td>上的* ngIf和* ngFor元素; </a> </li> <li> <a target="_blank" title="在< td>上使用Javascript替换元素" href="/1499462.html"> 在< td>上使用Javascript替换元素; </a> </li> <li> <a target="_blank" title="溢出:滚动；在<td>" href="/2729675.html"> 溢出:滚动；在<td>; </a> </li> <li> <a target="_blank" title="页面设计< a href>，<按钮>，<输入>在JSP中" href="/866262.html"> 页面设计< a href>，<按钮>，<输入>在JSP中; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>移动开发最新文章</h5> <ul> <li> <a target="_blank" title="访问/ var / mobile / Containers / Data / Application中的文件，无需越狱iPhone" href="/918992.html"> 访问/ var / mobile / Containers / Data / Application中的文件，无需越狱iPhone; </a> </li> <li> <a target="_blank" title="无法发送使用JavaMail和客户经理的Gmail电子邮件（错误400）" href="/157852.html"> 无法发送使用JavaMail和客户经理的Gmail电子邮件（错误400）; </a> </li> <li> <a target="_blank" title="org.apache.http.conn.HttpHostConnectException：连接到http：// localhost在android中拒绝" href="/544618.html"> org.apache.http.conn.HttpHostConnectException：连接到http：// localhost在android中拒绝; </a> </li> <li> <a target="_blank" title="iOS 9.3：发生SSL错误，无法与服务器建立安全连接" href="/917199.html"> iOS 9.3：发生SSL错误，无法与服务器建立安全连接; </a> </li> <li> <a target="_blank" title="WRITE_EXTERNAL_STORAGE不适用于棒棒糖，即使它已设置在清单中" href="/1738831.html"> WRITE_EXTERNAL_STORAGE不适用于棒棒糖，即使它已设置在清单中; </a> </li> <li> <a target="_blank" title="java.net.ProtocolException：流意外结束" href="/154260.html"> java.net.ProtocolException：流意外结束; </a> </li> <li> <a target="_blank" title="的冲突依赖“com.android.support:support-annotations~~V”。解决版本的应用程序（23.1.0）和测试应用程序（23.0.1）的不同" href="/174222.html"> 的冲突依赖“com.android.support:support-annotations~~V”。解决版本的应用程序（23.1.0）和测试应用程序（23.0.1）的不同; </a> </li> <li> <a target="_blank" title="SDK的位置没有找到。与local.properties文件或者与ANDROID_HOME环境变量sdk.dir限定位置" href="/188192.html"> SDK的位置没有找到。与local.properties文件或者与ANDROID_HOME环境变量sdk.dir限定位置; </a> </li> <li> <a target="_blank" title="如何处理：java.util.concurrent.TimeoutException：android.os.BinderProxy.finalize（）超时10秒后错误？" href="/96332.html"> 如何处理：java.util.concurrent.TimeoutException：android.os.BinderProxy.finalize（）超时10秒后错误？; </a> </li> <li> <a target="_blank" title="什么是\？（反斜线问号）转义序列是什么意思？" href="/690277.html"> 什么是\？（反斜线问号）转义序列是什么意思？; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '防止,lt,输入,gt,在,iphone,上,滚动,屏幕,的,元素'; var cat = 'cc';';//mobile</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>

防止&lt;输入&gt;在 iPhone 上滚动屏幕的元素? [英] Preventing an &lt;input&gt; element from scrolling the screen on iPhone?

问题描述

推荐答案

防止<输入>在 iPhone 上滚动屏幕的元素? [英] Preventing an <input> element from scrolling the screen on iPhone?