覆盖网站上文本输入区域的默认移动设备键盘？ (HTML/JS/jQuery)

Posted 2023-05-07

【中文标题】覆盖网站上文本输入区域的默认移动设备键盘？ (HTML/JS/jQuery)

【英文标题】：Override default mobile device keyboard for text input area on website? (HTML/JS/jQuery)

【发布时间】：2015-04-26 12:42:56

【问题描述】：

我被分配了一项任务，到目前为止，我认为这可能是不可能的。我想知道是否可以覆盖默认系统键盘以在文本输入区域（在移动设备上）进行输入。

假设操作系统是 android。有没有办法让移动网站在单击文本输入区域时不显示默认系统键盘？我对编程有一点了解，所以我知道在应用程序中使用 Java 是可能的，但这超出了这个特定问题的范围。

IE，假设您在网站上有一个数字输入字段。您能否改为使用某种形式的 javascript（如 onFocus、onBlur 等）或媒体查询来显示自定义弹出式键盘以进行数据输入，并以某种方式告诉设备不要显示其默认的文本输入方法？

我读过一些关于 jQuery datepicker 的其他问题，可以通过将元素设置为只读或类似来隐藏键盘，但问题是我的元素仍然需要能够接受输入。

我发现的唯一其他类似问题是here。唉，它也没有答案。

值得一提的是，此任务与数学相关，其中弹出式键盘条目将提供仅与问题相关的有限答案输入可能性，而不需要完整的键盘，并且通常对于手头的任务来说过度杀伤力.

编辑：另外，强制使用纯数字输入键盘不是可接受的解决方案，因为输入（在某些情况下）将需要分数条和/或变量，例如 x 和 y。

【参考方案1】：

您可以在现代浏览器中将输入字段标记为只读，例如

<input name="TextBox1" type="text" id="TextBox1" readonly="readonly" />

您可以设置焦点和光标，但不能编辑此输入（不会弹出默认菜单）。 现在您可以构建您的自定义键盘并使用 js 设置相应的值。 听起来很简单，但事实并非如此——您必须确保输入字段在输入过程中保持可见，因此可能需要重新考虑您的页面布局。

【讨论】：

您能否详细说明您的答案，添加更多关于您提供的解决方案的描述？好像有点笼统

哦..对不起..已经很久了..我确实包含了html代码，但没有将其标记为代码，所以它没有显示出来..现在改变它跨度>