Javascript HTML Mobile - 强制隐藏软键盘

HTML Mobile -forcing the soft keyboard to hide

提问by crodica

I am developing the front end site for a coupon company, and I have a page where the user only needs to input phone number and $$ spent. We came up with a fun on-screen keyboard built in Javascript, that is easy to use, and fast. However, I am looking for a solution to stop the soft keyboard from popping when the user focuses and enters text/numbers in those fields.

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

I know about the "number/phone/email" type attributes that HTML5 came up with. However, at the risk of sounding crazy, I really want to just use my on-screen keyboard.

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

Note: this web site is mostly targeted to tablets.

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

Thanks.

谢谢。

采纳答案by Scott Stevens

Since the soft keyboard is part of the OS, more often than not, you won't be able to hide it - also, on iOS, hiding the keyboard drops focus from the element.

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

However, if you use the onFocusattribute on the input, and then blur()the text input immediately, the keyboard will hide itself and the onFocusevent can set a variable to define which text input was focused last.

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

Then alter your on-page keyboard to only alter the last-focused (check using the variable) text input, rather than simulating a key press.

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

回答by thamind

Scott S's answer worked perfectly.

Scott S 的回答非常有效。

I was coding a web-based phone dialpad for mobile, and every time the user would press a number on the keypad (composed of td span elements in a table), the softkeyboard would pop up. I also wanted the user to not be able to tap into the input box of the number being dialed. This actually solved both problems in 1 shot. The following was used:

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

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

回答by ndeufemia

For further readers/searchers:

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

As Rene Potpoints out on this topic,

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

By adding the attribute readonly(or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.

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

With this method, you can avoid popping up the "soft" Keyboard and still launch click events / fill the input by any on-screen keyboard.

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

This solution also works fine with date-time-pickers which generally already implement controls.

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

回答by Bob Jase

Those answers aren't bad, but they are limited in that they don't actually allow you to enter data. We had a similar problem where we were using barcode readers to enter data into a field, but we wanted to suppress the keyboard.

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

This is what I put together, it works pretty well:

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

https://codepen.io/bobjase/pen/QrQQvd/

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()));

});

When you click in the <input>box, it simulates a cursor in that box but really puts the focus on an empty <select>box. Select boxes naturally allow for keypresses to support jumping to an element in the list so it was only a matter of rerouting the keypress to the original input and offsetting the simulated cursor.

当您单击该<input>框时，它会模拟该框中的光标，但实际上将焦点放在一个空<select>框上。选择框自然允许按键支持跳转到列表中的元素，因此只需将按键重新路由到原始输入并偏移模拟光标即可。

This won't work for backspace, delete, etc... but we didn't need those. You could probably use jQuery's trigger to send the keyboard event directly to another input box somewhere but we didn't need to bother with that so I didn't do it.

这不适用于退格、删除等……但我们不需要这些。您可能可以使用 jQuery 的触发器将键盘事件直接发送到某个地方的另一个输入框，但我们不需要为此烦恼，所以我没有这样做。

回答by Sportac

example how i made it , After i fill a Maximum length it will blur from my Field (and the Keyboard will disappear ) , if you have more than one field , you can just add the line that i add '//'

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

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

回答by user10226243

I could not use some of the suggestions provided.

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

In my case I had Google Chrome being used to display an Oracle APEX Application. There were some very specific input fields that allowed you to start typing a value and a list of values would begin to be displayed and reduced as you became more specific in your typing. Once you selected the item from the list of available options, the focus would still be on the input field.

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

I found that my solution was easily accomplished with a custom event that throws a custom error like the following:

我发现我的解决方案可以通过自定义事件轻松完成，该事件引发如下自定义错误：

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

回答by Roland

I am fighting the soft keyboard on the Honeywell Dolphin 70e with Android 4.0.3. I don't need the keyboard because the input comes from the builtin barcode reader through the 'scanwedge', set to generate key events.

我正在与使用 Android 4.0.3 的 Honeywell Dolphin 70e 上的软键盘作斗争。我不需要键盘，因为输入来自内置条码阅读器，通过“scanwedge”设置为生成键事件。

What I found was that the trick described in the earlier answers of:

我发现的是早期答案中描述的技巧：

input.blur();
input.focus();

works, but only once, right at page initialization. It puts the focus in the input element without showing the soft keyboard. It does NOT work later, e.g. after a TAB character in the suffix of the barcode causes the onblur or oninput event on the input element.

工作，但只有一次，就在页面初始化。它将焦点放在输入元素上而不显示软键盘。它在以后不起作用，例如在条形码后缀中的 TAB 字符导致输入元素上的 onblur 或 oninput 事件之后。

To read and process lots of barcodes, you may use a different postfix than TAB (9), e.g. 8, which is not interpreted by the browser. In the input.keydownevent, use e.keyCode == 8to detect a complete barcode to be processed.

要读取和处理大量条码，您可以使用与 TAB (9) 不同的后缀，例如 8，它不会被浏览器解释。在input.keydown事件中，用于e.keyCode == 8检测要处理的完整条码。

This way, you initialize the page with focus in the input element, with keyboard hidden, all barcodes go to the input element, and the focus never leaves that element. Of course, the page cannot have other input elements (like buttons), because then you will not be able to return to the barcode input element with the soft keyboard hidden.

这样，您在输入元素中使用焦点初始化页面，隐藏键盘，所有条形码都转到输入元素，并且焦点永远不会离开该元素。当然，页面不能有其他输入元素（如按钮），因为那样你将无法返回到隐藏软键盘的条码输入元素。

Perhaps reloading the page after a button click may be able to hide the keyboard. So use ajax for fast processing of barcodes, and use a regular asp.net button with PostBack to process a button click and reload the page to return focus to the barcode input with the keyboard hidden.

也许在单击按钮后重新加载页面可能会隐藏键盘。因此，使用 ajax 快速处理条码，并使用带有 PostBack 的常规 asp.net 按钮来处理按钮单击并重新加载页面以将焦点返回到隐藏键盘的条码输入。