我正在为一家优惠券公司开发前端网站，我有一个页面，用户只需要输入电话号码和花费的 $$。我们想出了一个有趣的 Javascript 内置屏幕键盘，它易于使用且速度快。但是，我正在寻找一种解决方案来阻止软键盘在用户集中注意力并在这些字段中输入文本/数字时弹出。
我知道 HTML5 提出的“号码/电话/电子邮件”类型属性。但是，冒着听起来很疯狂的风险，我真的只想使用我的屏幕键盘。
注意：此网站主要针对平板电脑。
谢谢。
【问题讨论】：
标签： javascript html ipad tablet
由于软键盘是操作系统的一部分，因此您通常无法隐藏它 - 此外，在 iOS 上，隐藏键盘会使元素失去焦点。
但是，如果您在输入上使用onFocus 属性，然后立即使用blur() 文本输入，则键盘将自行隐藏，onFocus 事件可以设置一个变量来定义哪个文本输入是最后聚焦的.
然后更改您的页面键盘以仅更改最后聚焦（使用变量检查）的文本输入，而不是模拟按键。
【讨论】：
<div style="position:relative; top:0px; left:0px">Text: <input type="text" /><div style="position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0" onClick="focusbox()"></div></div>。父 div 的相对（或绝对）定位导致绝对定位的子元素相对于其父元素。
Scott S 的回答完美。
我正在编写一个基于 Web 的移动电话拨号盘，每次用户按下键盘上的数字（由表格中的 td span 元素组成）时，都会弹出软键盘。我还希望用户不能点击正在拨打的号码的输入框。这实际上一枪解决了这两个问题。使用了以下内容：
<input type="text" id="phone-number" onfocus="blur();" />
【讨论】：
对于更多的读者/搜索者：
正如Rene Pot 在this topic 上指出的那样，
通过将属性
readonly（或readonly="readonly"）添加到输入字段，您应该可以防止任何人在其中输入任何内容，但仍然可以在其上启动点击事件。
使用这种方法，您可以避免弹出“软”键盘并仍然启动点击事件/通过任何屏幕键盘填充输入。
此解决方案也适用于通常已经实现控制的日期时间选择器。
【讨论】：
示例我是如何做到的，在我填充了最大长度后，它会从我的 字段（并且键盘将消失），如果您有多个字段，您可以添加我添加的行'//'
var MaxLength = 8;
$(document).ready(function () {
$('#MyTB').keyup(function () {
if ($(this).val().length >= MaxLength) {
$('#MyTB').blur();
// $('#MyTB2').focus();
}
}); });
【讨论】：
这些答案还不错，但它们的局限性在于它们实际上不允许您输入数据。我们有一个类似的问题，我们使用条形码阅读器将数据输入到字段中，但我们想抑制键盘。
这是我整理的，效果很好：
https://codepen.io/bobjase/pen/QrQQvd/
<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" />
<span id="fakecursor" />
<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />
#hiddenField {
height:17px;
width:1px;
position:absolute;
margin-left:3px;
margin-top:2px;
border:none;
border-width:0px 0px 0px 1px;
}
#cursorMeasuringDiv {
position:absolute;
visibility:hidden;
margin:0px;
padding:0px;
}
#hiddenField:focus {
border:1px solid gray;
border-width:0px 0px 0px 1px;
outline:none;
animation-name: cursor;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes cursor {
from {opacity:0;}
to {opacity:1;}
}
// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
// silently shift the focus to the hidden select box
$("#hiddenField").focus();
$("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});
// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
// get the current value of the readonly field
var currentValue = $("#visibleField").val();
// and append the key the user pressed into that field
$("#visibleField").val(currentValue + e.key);
$("#cursorMeasuringDiv").text(currentValue + e.key);
// measure the width of the cursor offset
var offset = 3;
var textWidth = $("#cursorMeasuringDiv").width();
$("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));
});
当您单击<input> 框时，它会模拟该框中的光标，但实际上会将焦点放在一个空的<select> 框上。选择框自然允许按键支持跳转到列表中的元素，因此只需将按键重新路由到原始输入并偏移模拟光标。
这不适用于退格、删除等...但我们不需要这些。您可能可以使用 jQuery 的触发器将键盘事件直接发送到某个地方的另一个输入框，但我们不需要为此烦恼，所以我没有这样做。
【讨论】：
我无法使用所提供的一些建议。
在我的例子中，我使用 Google Chrome 来显示 Oracle APEX 应用程序。 有一些非常具体的输入字段允许您开始输入值，并且随着您的输入变得更加具体，值列表将开始显示和减少。从可用选项列表中选择项目后，焦点仍将位于输入字段上。
我发现我的解决方案很容易通过引发如下自定义错误的自定义事件完成：
throw "throwing a custom error exits input and hides keyboard";
【讨论】：
我正在使用 Android 4.0.3 与 Honeywell Dolphin 70e 上的软键盘作斗争。我不需要键盘，因为输入来自内置的条形码阅读器，通过“scanwedge”设置为生成键事件。
我发现之前的答案中描述的技巧是：
input.blur();
input.focus();
在页面初始化时有效，但只有一次。它将焦点放在输入元素上，而不显示软键盘。它稍后不起作用，例如条形码后缀中的 TAB 字符后会导致输入元素上的 onblur 或 oninput 事件。
要读取和处理大量条形码，您可以使用不同于 TAB (9) 的后缀，例如8，浏览器不解释。在input.keydown事件中，使用e.keyCode == 8检测一个完整的待处理条码。
这样，您在输入元素中初始化页面，并隐藏键盘，所有条形码都转到输入元素，并且焦点永远不会离开该元素。当然，页面不能有其他输入元素（如按钮），因为那样你将无法返回隐藏软键盘的条形码输入元素。
也许在单击按钮后重新加载页面可能能够隐藏键盘。因此使用 ajax 来快速处理条码，并使用带有 PostBack 的常规 asp.net 按钮来处理按钮单击并重新加载页面以将焦点返回到隐藏键盘的条码输入。
【讨论】：
我也面临同样的问题，我可以通过添加一个 css 属性来隐藏 android 键盘，即使焦点在文本框中
<input type="text" style="pointer-events:none" />
而且效果很好……
【讨论】：
这可能会帮助其他只想禁用软键盘的人。我设法不是通过 javascript 而是通过安装一个名为 Null Keyboard 的新键盘布局来禁用软键盘
【讨论】：
我很困惑为什么没有人提出这个......也许我误解了这个问题但是，
<input inputmode="none" />
【讨论】：