我正在为iOS Safari开发Web表单。
它具有一些选项卡和许多输入。
我在div标签下面放置了许多输入标签,以显示/隐藏标签。
开发此类Web表单时遇到了延迟。
我从网络表单中省略了一些代码来检测本质。
本质如下。
有一个<div>
,其中有style="display: none;"
。
稍后将其称为“ none-div”。
将4,000个<div>
放在具有<input type="checkbox">
和<input type="text">
的none-div下。
将<input type="text" name="input1">
放在none-div上。
触摸<input type="text" name="input1">
。
出现软件键盘大约需要15秒。
示例页面:https://quwahara.github.io/inputs-4000/cb-txt-4000-none.html
iOS Chrome浏览器不会发生。
我希望立即显示软件键盘。
我做了一个复制码。 https://github.com/quwahara/inputs-4000
屏幕录像:https://youtu.be/ierX3dIyt_A
在视频中:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:,">
<title>CB TXT 4000 None</title>
</head>
<body>
<div>
<h1>CB TXT 4000 None</h1>
<div>
<label for="input1">input1</label>
<input type="text" name="input1">
</div>
<div>
<label for="input2">input2</label>
<input type="text" name="input2">
</div>
</div>
<div style="display: none;">
<!-- Repeats below line 4,000 times -->
<div><input type="checkbox"><input type="text"></div>
</div>
</body>
</html>
iPad mini(第5代) iOS 12.3.1
这不会发生:
<div>
有style="display: block;"
。该页面是:https://quwahara.github.io/inputs-4000/cb-txt-4000-block.html <div>
中的4,000只只有<input type="checkbox">
。该页面是:https://quwahara.github.io/inputs-4000/cb-4000-none.html <div>
中的4,000只只有<input type="text">
。该页面是:https://quwahara.github.io/inputs-4000/txt-4000-none.html 谢谢。