HTML Mobile - 强制隐藏软键盘

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指出这个话题,

通过将输入字段设置为readonly您应该阻止任何人在其中键入任何内容,但仍然可以在其上启动单击事件.

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

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

Answer 4

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

<input inputmode="none" />

Answer 5

例如我是如何制作的，在我填充最大长度后，它将从我的字段中模糊（并且键盘将消失），如果您有多个字段，您只需添加我添加“//”的行

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

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