带你跳出H5输入框input的坑

本文介绍了在开发微信H5页面时,遇到手机键盘弹出导致页面被压缩的问题,以及如何通过JavaScript动态调整页面top和高度来解决这一问题,适用于Android和iOS设备。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

不知道经常做微信H5的小伙伴有没遇到这样的问题,在PC浏览器完美测试的页面,一到手机上就崩溃。

崩溃的程度决定了你的心情,哈哈。完美的呈现总有不明的自豪感。屌屌的!哈哈!


但是作为一名稳重的程序员,最起码的沉着肯定是要有的。我今天就来沉着的吹牛*了!


遇到的问题是input的坑——手机的键盘把H5的页面压榨了,很难受。不管是Android还是IOS都曾经遇到过这个问题。


解决思路也比较简单,就是通过JS把页面的top和高度都动态再设置一次,完美解决!微笑


直接上代码!


HTML

<span style="font-size:18px;"><input type="number" id="typeBox" name="phone" required ></span>
<span style="font-size:18px;">
</span>
<span style="font-size:18px;">JS</span>
<span style="font-size:18px;">
</span>
<pre name="code" class="javascript"><span style="font-size:18px;">var bodyH = document.body.clientHeight;
var type = document.getElementById('typeBox');
var fif = document.getElementById('fip');
type.addEventListener("focus",function() {
	fif.style.top = 0 + "px";
	fif.style.height = bodyH + "px";
});
type.addEventListener("blur",function() {
	fif.style.top = 0 + "px";
	fif.style.height = bodyH + "px";
});</span>



其中fip就是整个容器。


以上方法就可以解决这个坑啦,希望遇到这个问题的童鞋能够参考解决咯。或者有更好的办法分享!大笑

### 如何配置PyCharm以使`input()`函数显示弹出式输入框 在Python标准库中,`input()` 函数默认情况下会在控制台等待用户输入。然而,在某些集成开发环境(IDE),如PyCharm中运行程序时,可能希望`input()` 调用能够在一个更友好的图形界面上呈现给用户而不是简单的命令行窗口。 对于想要实现通过GUI方式获取用户输入的需求,可以考虑采用第三方库来替代内置的 `input()`. 一种常见的做法是利用Tkinter模块创建一个小巧的消息对话框来进行交互: ```python import tkinter as tk from tkinter import simpledialog root = tk.Tk() root.withdraw() user_input = simpledialog.askstring("Input", "Enter something:") print(f"You entered: {user_input}") ``` 上述代码片段展示了如何借助 Tkinter 库中的 `simpledialog.askstring()` 方法构建一个简易的字符串输入对话框[^1]. 当这段脚本被执行的时候,会跳出一个小窗体让用户键入数据;一旦确认提交,则返回所填内容并打印出来。 值得注意的是,这种方法并不涉及对 PyCharm 的特殊设置或修改其行为模式,而是改变了 Python 程序本身处理用户输入的方式。因此,无需调整 IDE 设置即可达到目的。 如果确实需要让普通的 `input()` 在特定环境下触发 GUI 输入框的效果,那么可以通过重定义全局命名空间内的 `input` 来做到这一点: ```python def gui_input(prompt=''): root = tk.Tk() root.withdraw() user_reply = simpledialog.askstring('Input', prompt) return str(user_reply) __builtins__.input = gui_input ``` 此段代码将覆盖原始的 `input()` 行为,使得后续任何地方调用它都会唤起基于 Tkinter 构建的输入框.
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值