HTML移动-forcing软键盘隐藏HTML移动-forcing软键盘隐藏(HTML Mobile

我开发的优惠券公司的前端部位，和我有一个页面，用户只需要输入电话号码和$$度过的。我们想出了一个有趣的屏幕上的键盘内置的Javascript，那就是使用方便，快捷。然而，我要寻找一个解决方案，当用户集中在这些领域中输入文本/数字，从弹出停止软键盘。

我知道的“数字/电话/电子邮件”类型属性是HTML5想出了。然而，在听起来疯狂的危险，我真的想只是用我的屏幕上的键盘。

注意：这个网站主要是针对平板电脑。

谢谢。

Answer 1:

由于软键盘是操作系统的一部分，更多的，往往不是你将无法掩盖它 - 同时，在iOS上，隐藏键盘滴焦点从元素。

但是，如果您使用onFocus属性的输入，然后blur()立即文本输入，键盘会隐藏自身和onFocus事件可以设置一个变量来定义其文本输入集中最后。

然后改变你对网页的键盘只（使用变量检查）的文本输入，而不是模拟按键改变最后的聚焦。

Answer 2:

斯科特的回答非常完美。

我被编码为移动基于Web的电话拨号盘，每一次用户将按下键盘上的数字（在表TD span元素组成），该softkeyboard会弹出。我也希望用户不能够进军数字的输入框进行拨打。这实际上在1次射门解决了这两个问题。下面使用：

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

Answer 3:

欲了解更多的读者/搜索：

由于刘若英锅指出了这个话题，

通过设置输入字段readonly="true" ，你应该阻止任何人在输入任何东西，但仍然能够在它推出一个click事件。

使用这种方法，你能避免弹出的“软”键盘仍然推出click事件/填充输入任何屏幕上的键盘。

该解决方案还正常工作与一般已经实行控制，日期，时间采摘。

Answer 4:

例如，我怎么做呢，我填的最大长度后它会从我场模糊（和键盘将消失），如果你有一个以上的领域，你可以补充一点，我添加行“//”

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:

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

在我来说，我不得不使用谷歌Chrome浏览器显示的Oracle APEX应用。有报道说，允许你开始输入一个值和值的列表将开始显示并减少你成为你的打字更具体的一些非常具体的输入字段。一旦你从可用选项列表中选择的项目，重点仍然是在输入栏。

我发现我的解决方案是与抛出类似以下的自定义错误的自定义事件很容易实现：

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

文章来源: HTML Mobile -forcing the soft keyboard to hide