HTML Mobile-强制软键盘隐藏[重复]

Question

我正在为一家优惠券公司开发前端网站，我有一个页面，用户只需要输入电话号码和花费的$$。我们用Javascript设计了一个有趣的屏幕键盘，它使用方便，速度快。然而，我正在寻找一种解决方案，当用户聚焦并在这些字段中输入文本/数字时，阻止软键盘弹出。

我知道HTML5提出的“数字/电话/电子邮件”类型属性。然而，冒着听起来很疯狂的风险，我真的很想只用屏幕上的键盘。

注意：该网站主要针对平板电脑。

谢谢。

Answer 1

斯科特·S的回答非常有效。

我正在为手机编写一个基于网络的电话拨号板，每次用户按下键盘上的数字（由表中的td-span元素组成）时，软键盘就会弹出。我还希望用户不能点击所拨号码的输入框。这实际上一下子解决了这两个问题。使用了以下内容：

<input type=“text”id=“phone-number”onfocus=“blur（）；”/>

Answer 2

由于软键盘是操作系统的一部分，通常情况下，您无法隐藏它，而且在iOS上，隐藏键盘会使焦点从元素中移开。

但是，如果您使用获得焦点属性，然后模糊（）文本立即输入，键盘将隐藏自身获得焦点事件可以设置一个变量来定义最后关注的文本输入。

然后改变页面键盘，只改变最后一次聚焦（使用变量检查）的文本输入，而不是模拟按键。

Answer 3

我很困惑为什么没有人把这个。。。也许我误解了这个问题，但是，

<输入输入模式=“无”/>

Answer 4

对于更多读者/搜索者：

作为雷内·波特指出这个主题,

通过添加属性只读（或readonly=“readonly”)在输入字段中，您应该防止任何人在其中键入任何内容，但仍然可以在其中启动单击事件。

使用此方法，您可以避免弹出“软”键盘，并且仍然可以启动单击事件/通过任何屏幕键盘填充输入。

此解决方案也适用于通常已经实现控件的日期时间选择器。

Answer 5

这些答案并不坏，但它们有局限性，因为它们实际上不允许您输入数据。我们在使用条形码阅读器将数据输入字段时遇到了类似的问题，但我们想取消键盘。

这就是我所做的，效果很好：

https://codepen.io/bobjase/pen/QrQQvd/

<!-- 必须是一个没有子项的选择框才能取消键盘-->输入：<select id=“hiddenField”/><span id=“fakeursor”/><input type=“text”readonly=“readonly”id=“visibleField”/><div id=“cursorMeasuringDiv”/>#隐藏字段{高度：17px；宽度：1px；位置：绝对；边缘左侧：3px；页边空白：2px；边界：无；边框宽度：0px 0px 0 px 1 px；}#光标测量Div{位置：绝对；可见性：隐藏；边距：0px；填充：0px；}#隐藏字段：焦点{边框：1px纯灰色；边框宽度：0px 0px 0 px 1 px；大纲：无；动画名称：光标；动画持续时间：1s；动画迭代计数：无限；}@关键帧光标{来自{不透明度：0；}到{不透明度：1；}}//只要可见光聚焦$（“#visibleField”）.bind（“焦点”，函数（e）{//将焦点悄悄移到隐藏的选择框$（“#hiddenField”）.focus（）；$（“#cursorMeasuringDiv”）.css（“font”，$（“#visibleField”）.csss（“字体”））；});//每当用户在选择框中的键盘上键入时//本机支持跳转到<选项>$（“#hiddenField”）.bind（“按键”，函数（e）{//获取只读字段的当前值var currentValue=$（“#visibleField”）.val（）；//并将用户按下的键附加到该字段中$（“#visibleField”）.val（currentValue+e.key）；$（“#cursorMeasuringDiv”）.text（currentValue+e.key）；//测量光标偏移的宽度var偏移=3；var textWidth=$（“#cursorMeasuringDiv”）.width（）；$（“#hiddenField”）.css（“marginLeft”，Math.min（offset+textWidth，$（“#可见字段”）.width（）））；});

当您单击<输入>框中，它模拟该框中的光标，但实际上将焦点放在一个空的<选择>框。选择框自然允许按键支持跳转到列表中的元素，因此只需将按键重新路由到原始输入并偏移模拟光标即可。

这不适用于退格、删除等……但我们不需要这些。您可能可以使用jQuery的触发器将键盘事件直接发送到另一个输入框，但我们不需要为此费心，所以我没有这样做。

Answer 6

示例我是如何制作的，在我填充了最大长度后，它将从我的字段（键盘将消失），如果您有多个字段，您可以添加我添加的行“//”

var最大长度=8；$（文档）.ready（函数（）{$（“#MyTB”）.keyup（函数（）{if（$（this）.val（）.length>=最大长度）{$（“#MyTB”）.blur（）；//$（“#MyTB2”）.focus（）；}}); });

Answer 7

我也面临同样的问题，我可以通过添加一个css属性来隐藏安卓键盘，即使焦点位于文本框中

<input type=“text”style=“pointer-events:none”/>

而且效果很好。。。

Answer 8

我正在用Android 4.0.3与Honeywell Dolphin 70e上的软键盘对抗。我不需要键盘，因为输入来自内置的条形码读取器，通过“扫描楔”，设置为生成关键事件。

我发现，前面的答案中描述的技巧是：

input.blur（）；input.focus（）；

只在页面初始化时工作一次。它将焦点放在输入元素中，而不显示软键盘。稍后它将不起作用，例如，在条形码后缀中的TAB字符导致输入元素上的onblur或oninput事件后。

要读取和处理大量条形码，您可以使用与TAB（9）不同的后缀，例如8，它不由浏览器解释。在输入.按键事件，使用e.keyCode==8检测待处理的完整条形码。

这样，您可以在输入元素中使用焦点初始化页面，隐藏键盘，所有条形码都会转到输入元素，焦点永远不会离开该元素。当然，页面不能有其他输入元素（如按钮），因为这样您就无法返回到隐藏软键盘的条形码输入元素。

也许点击按钮后重新加载页面可以隐藏键盘。因此，使用ajax快速处理条形码，并使用带有PostBack的常规asp.net按钮处理按钮单击并重新加载页面，以将焦点返回到隐藏键盘的条形码输入。

Answer 9

我无法使用提供的一些建议。

在我的例子中，我使用谷歌浏览器来显示Oracle APEX应用程序。有一些非常具体的输入字段允许您开始键入值，随着您键入的内容变得更加具体，值列表将开始显示并减少。一旦您从可用选项列表中选择了该项，焦点仍将位于输入字段上。

我发现我的解决方案很容易通过一个自定义事件完成，该自定义事件会引发如下自定义错误：

throw“抛出自定义错误退出输入并隐藏键盘”；

Answer 10

这可能会帮助其他只想禁用软键盘的人。我不是通过javascript，而是通过安装一个名为空键盘