Scott S 的回答非常有效。

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

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

由于软键盘是操作系统的一部分，通常情况下，您将无法隐藏它 - 此外，在 iOS 上，隐藏键盘会使元素失去焦点。

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

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

对于更多的读者/搜索者：

正如Rene Pot在这个话题上指出的那样，

通过将属性readonly（或readonly="readonly"）添加到输入字段，您应该防止任何人在其中输入任何内容，但仍然能够在其上启动单击事件。

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

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

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

<input inputmode="none" />

这些答案还不错，但它们的局限性在于它们实际上不允许您输入数据。我们有一个类似的问题，我们使用条形码阅读器将数据输入到一个字段中，但我们想抑制键盘。

这是我放在一起的，效果很好：

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