我正在为一家优惠券公司开发前端网站，我有一个页面，用户只需要输入电话号码和花费的美元。我们想出了一个有趣的 Javascript 内置屏幕键盘，它易于使用且速度快。但是，我正在寻找一种解决方案来阻止软键盘在用户集中注意力并在这些字段中输入文本/数字时弹出。
我知道 HTML5 提出的“号码/电话/电子邮件”类型属性。但是，冒着听起来很疯狂的风险，我真的只想使用我的屏幕键盘。
注意：该网站主要针对平板电脑。
谢谢。
问问题
127355 次
10 回答
54
Scott S 的回答非常有效。
我正在为移动设备编写一个基于网络的电话拨号盘，每次用户在键盘上按下一个数字（由表格中的 td span 元素组成）时，都会弹出软键盘。我还希望用户不能点击正在拨打的号码的输入框。这实际上一枪解决了这两个问题。使用了以下内容：
<input type="text" id="phone-number" onfocus="blur();" />
于 2014-03-19T20:43:16.780 回答
49
由于软键盘是操作系统的一部分，通常情况下，您将无法隐藏它——同样，在 iOS 上，隐藏键盘会使元素失去焦点。
但是，如果您onFocus在输入上使用该属性，然后blur()立即进行文本输入，则键盘将自行隐藏，并且该onFocus事件可以设置一个变量来定义哪个文本输入是最后聚焦的。
然后更改您的页面键盘以仅更改最后聚焦的（使用变量检查）文本输入，而不是模拟按键。
于 2012-06-07T22:20:33.320 回答
14
我很困惑为什么没有人提出这个......也许我误解了这个问题但是，
<input inputmode="none" />
于 2021-06-09T16:25:19.443 回答
6
这些答案还不错，但它们的局限性在于它们实际上不允许您输入数据。我们有一个类似的问题，我们使用条形码阅读器将数据输入到字段中，但我们想抑制键盘。
这是我放在一起的，效果很好：
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 的触发器将键盘事件直接发送到某个地方的另一个输入框，但我们不需要为此烦恼，所以我没有这样做。
于 2018-05-09T16:29:07.327 回答
4
示例我是如何做到的
var MaxLength = 8;
$(document).ready(function () {
$('#MyTB').keyup(function () {
if ($(this).val().length >= MaxLength) {
$('#MyTB').blur();
// $('#MyTB2').focus();
}
}); });
于 2017-10-16T09:04:48.160 回答
1
我正在使用 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 按钮来处理按钮单击并重新加载页面以将焦点返回到隐藏键盘的条形码输入。
于 2019-08-27T13:32:37.950 回答
1
我面临同样的问题，即使焦点在文本框中，我也可以通过添加一个 css 属性来隐藏 android 键盘
<input type="text" style="pointer-events:none" />
它工作正常......
于 2020-06-17T07:13:52.370 回答
0
我无法使用提供的一些建议。
就我而言，我使用 Google Chrome 来显示 Oracle APEX 应用程序。有一些非常具体的输入字段允许您开始输入值，并且随着您的输入变得更加具体，值列表将开始显示和减少。从可用选项列表中选择项目后，焦点仍将位于输入字段上。
我发现我的解决方案很容易通过引发如下自定义错误的自定义事件来完成：
throw "throwing a custom error exits input and hides keyboard";
于 2018-08-14T18:53:16.270 回答
0
这可能会帮助其他只想禁用软键盘的人。我设法不是通过 javascript 而是通过安装一个名为Null Keyboard的新键盘布局来禁用软键盘
于 2021-06-09T11:57:53.037 回答