HTML Mobile - 强制软键盘隐藏

Posted 2023-02-25

【中文标题】HTML Mobile - 强制软键盘隐藏

【英文标题】：HTML Mobile -forcing the soft keyboard to hide

【发布时间】：2012-06-12 00:11:12

【问题描述】：

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

我知道 html5 提出的“号码/电话/电子邮件”类型属性。但是，冒着听起来很疯狂的风险，我真的只想使用我的屏幕键盘。

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

谢谢。

【问题讨论】：

这是疯了。如果您使用标准输入字段，请使用标准输入法。

尽管如此，拥有屏幕键盘还有很多好处，除了它们的使用和构建都很有趣。一方面，它们是高度可定制的，以密切针对您的受众的需求，第二是安全，第三是屏幕空间。 ;-)

啊，我知道我将“前端site”误解为“前端app”。您对网站的用户期望有更多回旋余地。

【参考方案1】：

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

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

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

【讨论】：

谢谢斯科特。在没有屏幕键盘的情况下，在常规 html 表单上进行测试时，您的建议非常有效。似乎我正在实现的 jquery mobile 或我正在使用的键盘对象正在创建他们自己的焦点事件，我还没有找到（“焦点”在库中的某处命名）。目前，我们的客户喜欢这个想法，但软键盘不断弹出的事实已经被关闭，所以我们放弃了这个功能。 :( 我有兴趣解决它，所以如果有人有兴趣，这里是键盘库：github.com/Mottie/Keyboard

只是一个想法——如果你在每个输入上放置一个透明的 div，然后使用 onClick 方法会发生什么？例如：<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 的相对（或绝对）定位导致绝对定位的子元素相对于其父元素。

android 键盘在点击 go 按钮后不隐藏？有什么想法吗？

【参考方案2】：

Scott S 的回答完美。

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

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

【讨论】：

实际上，这个答案比@ScottS 的答案更适合我，没有不尊重他的答案。我怀疑 html 输入语句和 $(document).ready() 之间经过的时间允许键盘触发，而 onfocus=blur();会更快，至少在我看来并防止键盘触发，

【参考方案3】：

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

正如Rene Pot 在this topic 上指出的那样，

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

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

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

【讨论】：

readonly="true" 不是有效的 HTML。它应该是 readonly="readonly"，或者只是没有属性值的只读

@carpii：恕我直言，W3C 做出如此糟糕的决定真是太可惜了！！！他们一定有他们的理由...... :-(

【参考方案4】：

示例我是如何做到的，在我填充了最大长度后，它会从我的 字段（并且键盘将消失），如果您有多个字段，您可以添加我添加的行'//'

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

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

【讨论】：

我在我的项目中遇到了类似的问题，我需要使用 Honeywell 设备的条形码阅读器来输入数据。但是，与您的不同，我不必在输入字段中显示它。我所做的是将 keyup 侦听器绑定到整个文档。当条码被读取时，用于触发每个条码字符的事件。我将它们推入一个数组，然后转换为字符串。我在我的情况下使用角度

非常感谢。你拯救了我的一天。并从 Java 中拯救了我。

就它的简单使用而言，它很酷！它不适用于条码扫描仪。

【参考方案6】：

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

在我的例子中，我使用 Google Chrome 来显示 Oracle APEX 应用程序。 有一些非常具体的输入字段允许您开始输入值，并且随着您的输入变得更加具体，值列表将开始显示和减少。从可用选项列表中选择项目后，焦点仍将位于输入字段上。

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

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

【参考方案7】：

我正在使用 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 按钮来处理按钮单击并重新加载页面以将焦点返回到隐藏键盘的条码输入。

【参考方案8】：

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

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

而且效果很好……

【参考方案9】：

这可能会帮助其他只想禁用软键盘的人。我设法不是通过 javascript 而是通过安装一个名为 Null Keyboard 的新键盘布局来禁用软键盘

【参考方案10】：

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

<input inputmode="none" />

【讨论】：

您现在也可以使用虚拟键盘apiweb.dev/virtualkeyboard