Question

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

我知道HTML5提供的“号码/电话/电子邮件”类型属性。然而，冒着疯狂的风险，我真的想用我的屏幕键盘。

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

感谢。

Answer 1

斯科特S的答案非常有效。

我正在为移动设备编写基于网络的电话拨号盘，每次用户按下键盘上的数字（由表格中的td span元素组成）时，软键盘就会弹出。我还希望用户无法点击正在拨打的号码的输入框。这实际上解决了一次拍摄中的两个问题。使用了以下内容：

<input type="text" id="phone-number" onfocus="blur();" />

Answer 2

由于软键盘是操作系统的一部分，因此通常无法隐藏它 - 而且，在iOS上，隐藏键盘会使焦点从元素中消失。

但是，如果您在输入上使用onFocus属性，然后立即使用blur()文本输入，键盘将隐藏自身，onFocus事件可以设置变量来定义哪个文本输入最后关注。

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

Answer 3

对于更多读者/搜索者：

Rene Pot指出this topic，

通过将输入字段设置为readonly="true"，您应该阻止任何人都可以在其中键入任何内容，但仍然可以启动点击就此而言。

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

这个解决方案也适用于日期时间选择器，它通常已经实现了控制。

Answer 4

示例我是如何制作的，在我填充最大长度后，它将模糊我的字段（键盘将消失），如果您有多个字段，则只需添加我添加的行＆＃39; //＆＃39;

var MaxLength = 8;
    $(document).ready(function () {
        $('#MyTB').keyup(function () {
            if ($(this).val().length >= MaxLength) {
               $('#MyTB').blur();
             //  $('#MyTB2').focus();
         }
          }); });

Answer 5

这些答案并不严重，但它们的限制在于它们实际上并不允许您输入数据。我们遇到类似的问题，我们使用条形码阅读器将数据输入到字段中，但我们想要抑制键盘。

这是我放在一起的，它运作得很好：

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的触发器将键盘事件直接发送到某个地方的另一个输入框，但我们并不需要为此烦恼所以我没有这样做。

Answer 6

我正在与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按钮来处理按钮单击，然后重新加载页面以将焦点返回至隐藏了键盘的条形码输入。

Answer 7

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

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

效果很好...

Answer 8

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

的新键盘布局来禁用软键盘

Answer 9

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

<input inputmode="none" />

Answer 10

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

就我而言，我使用Google Chrome浏览器来显示Oracle APEX应用程序。有一些非常具体的输入字段，可让您开始输入一个值，并且随着您输入内容的更加具体，将开始显示和减少值列表。从可用选项列表中选择项目后，焦点仍将停留在输入字段上。

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

throw "throwing a custom error exits input and hides keyboard";

HTML Mobile - 强制隐藏软键盘

10 个答案: