blocks|key|335118|text|由于软键盘是操作系统的一部分，因此通常情况下，您无法隐藏它-而且，在iOS上，隐藏键盘会使焦点从元素中消失。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|335119|但是，如果对输入使用onFocus属性，然后立即对文本输入执行blur()操作，键盘将隐藏自身，并且onFocus事件可以设置一个变量来定义最后聚焦的文本输入。|offset|length|style|CODE|335120|然后更改页面上的键盘，使其仅更改最后聚焦的文本输入(使用变量检查)，而不是模拟按键。|335121|entityMap^0|0|A|7|V|6|1E|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]|$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

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.

However, if you use the <code>onFocus</code> attribute on the input, and then <code>blur()</code> the text input immediately, the keyboard will hide itself and the <code>onFocus</code> event can set a variable to define which text input was focused last.

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

blocks|key|335149|text|斯科特·S的回答非常有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|335150|我正在为手机编写一个基于web的电话拨号盘，每当用户在键盘上按下一个数字(由表中的td+span元素组成)时，软键盘就会弹出来。我还希望用户不能进入正在拨打的号码的输入框。这实际上在一次拍摄中解决了这两个问题。使用了以下内容：|335151|<input+type="text"+id="phone-number"+onfocus="blur();"+/>|code-block|syntax|javascript|335152|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Scott S's answer worked perfectly.

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:

<pre><code>&lt;input type="text" id="phone-number" onfocus="blur();" /&gt;
</code></pre>

blocks|key|551995|text|我很困惑为什么没人把这个..。也许我误解了这个问题但是，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551996|<input+inputmode="none"+/>|code-block|syntax|javascript|551997|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I'm very confused as to why no one has put this... maybe I'm misunderstanding the question but,
<pre><code>&lt;input inputmode=&quot;none&quot; /&gt;
</code></pre>

blocks|key|551753|text|这些答案并不坏，但它们的局限性在于它们实际上不允许您输入数据。我们遇到了一个类似的问题，我们使用条形码阅读器将数据输入到字段中，但我们想要抑制键盘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551754|这是我放在一起的，它工作得很好：|551755|https://codepen.io/bobjase/pen/QrQQvd/|offset|length|551756|
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+%2B+e.key);
++$("#cursorMeasuringDiv").text(currentValue+%2B+e.key);

++//+measure+the+width+of+the+cursor+offset
++var+offset+=+3;
++var+textWidth+=+$("#cursorMeasuringDiv").width();
++$("#hiddenField").css("marginLeft",Math.min(offset%2BtextWidth,$("#visibleField").width()));

});|code-block|syntax|javascript|551757|当您在<input>框中单击时，它会模拟该框中的光标，但实际上将焦点放在一个空的<select>框上。选择框自然允许按键跳转到列表中的元素，因此只需将按键重新路由到原始输入并偏移模拟光标即可。|style|CODE|551758|这不适用于退格键、删除键等。但我们不需要这些。您可以使用jQuery的触发器将键盘事件直接发送到另一个输入框，但我们不需要为此费心，所以我没有这么做。|551759|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|12|0|0|0|3|7|14|8|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|16|8|@$F|17|G|18|O|P]|$F|19|G|1A|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|E]]]]

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:

<a href="https://codepen.io/bobjase/pen/QrQQvd/" rel="noreferrer">https://codepen.io/bobjase/pen/QrQQvd/</a>

<pre><code>&lt;!-- must be a select box with no children to suppress the keyboard --&gt;
input: &lt;select id="hiddenField" /&gt; 
&lt;span id="fakecursor" /&gt;

&lt;input type="text" readonly="readonly" id="visibleField" /&gt;
&lt;div id="cursorMeasuringDiv" /&gt;

#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 &lt;option&gt;
$("#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()));

});
</code></pre>

When you click in the <code>&lt;input&gt;</code> box, it simulates a cursor in that box but really puts the focus on an empty <code>&lt;select&gt;</code> 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.

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.

blocks|key|551727|text|示例我是如何创建它的，在我填充了最大长度后，它将从我的字段中模糊(并且键盘将消失)，如果您有多个字段，您只需添加我添加的行'//‘|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551728|var+MaxLength+=+8;
++++$(document).ready(function+()+{
++++++++$('#MyTB').keyup(function+()+{
++++++++++++if+($(this).val().length+>=+MaxLength)+{
+++++++++++++++$('#MyTB').blur();
+++++++++++++//++$('#MyTB2').focus();
+++++++++}
++++++++++});+});|code-block|syntax|javascript|551729|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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 '//'

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

blocks|key|335265|text|我正在与安卓4.0.3的霍尼韦尔Dolphin+70e的软键盘作斗争。我不需要键盘，因为输入来自内置条形码阅读器，通过“scanwedge”设置为生成按键事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|335266|我发现在前面的答案中描述的技巧是：|335267|input.blur();
input.focus();|code-block|syntax|javascript|335268|工作，但只有一次，就在页面初始化的时候。它将焦点放在输入元素上，而不显示软键盘。它在以后不起作用，例如在条形码后缀中的TAB字符导致输入元素上的onblur或oninput事件之后。|335269|要读取和处理大量条形码，您可以使用与TAB+(9)不同的后缀，例如8，浏览器不会对其进行解释。在input.keydown事件中，使用e.keyCode+==+8检测要处理的完整条形码。|offset|length|style|CODE|335270|这样，您就可以在input元素中使用焦点初始化页面，并隐藏键盘，所有条形码都转到input元素，并且焦点永远不会离开该元素。当然，页面不能有其他输入元素(如按钮)，因为这样您就不能在隐藏软键盘的情况下返回到条形码输入元素。|335271|也许在单击按钮后重新加载页面可能能够隐藏键盘。因此，使用ajax来快速处理条形码，并使用带有PostBack的常规asp.net按钮来处理按钮单击并重新加载页面，以便将焦点返回到隐藏键盘的条形码输入。|335272|entityMap^0|0|0|0|0|1C|D|1V|E|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@$M|11|N|12|O|P]|$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

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.

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

<pre><code>input.blur();
input.focus();
</code></pre>

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.

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 <code>input.keydown</code> event, use <code>e.keyCode == 8</code> to detect a complete barcode to be processed.

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.

blocks|key|551922|text|我正面临着同样的问题，我能够隐藏android键盘，即使焦点是在文本框中只需添加一个css属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551923|<input+type="text"+style="pointer-events:none"+/>|code-block|syntax|javascript|551924|而且它工作得很好。|551925|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I am facing the same issue, I am able to hide android keyboard even focus is in textbox by just adding one css property 

<pre><code>&lt;input type="text" style="pointer-events:none" /&gt;
</code></pre>

and it works fine...

blocks|key|551809|text|我不能使用所提供的一些建议。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551810|在我的例子中，我使用Google+Chrome来显示Oracle+APEX应用程序。有一些非常特定的输入字段，允许您开始键入一个值，并且值列表将开始显示，并随着您输入的更具体而减少。从可用选项列表中选择项目后，焦点仍将放在输入字段上。|551811|我发现我的解决方案很容易通过一个自定义事件来完成，该事件抛出一个自定义错误，如下所示：|551812|throw+"throwing+a+custom+error+exits+input+and+hides+keyboard";|code-block|syntax|javascript|551813|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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.

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

<pre><code>throw "throwing a custom error exits input and hides keyboard";
</code></pre>

blocks|key|335369|text|这可能会帮助其他人，他们只是想禁用软键盘一般。我设法禁用了软键盘，不是通过javascript，而是通过安装一个名为Null+Keyboard的新键盘布局|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|335370|entityMap|0|LINK|mutability|MUTABLE|url|https://play.google.com/store/apps/details?id=com.wparam.nullkeyboard&hl=de&gl=US^0|1M|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This might help others, that just want to disable the soft keyboard in general. I managed to disable the soft keyboard not by javascript but by installing a new keyboard layout called <a href="https://play.google.com/store/apps/details?id=com.wparam.nullkeyboard&amp;hl=de&amp;gl=US" rel="nofollow noreferrer">Null Keyboard</a>

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. 

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.

Note: this web site is mostly targeted to tablets. 

Thanks.

HTML Mobile -forcing the soft keyboard to hide

路由

jQuery

HTML5

我正在开发一个优惠券公司的前端网站，我有一个页面，用户只需要输入电话号码和$$消费。我们想出了一个用Javascript构建的有趣的屏幕键盘，它易于使用，而且速度快。然而，我正在寻找一种解决方案，当用户聚焦并在这些字段中输入文本/数字时，阻止软键盘弹出。我知道HTML5提出的“号码/电话/电子邮件”类型的属性。然而，冒着听起来疯狂的风险，我真的想只使用我的屏幕键盘。注:本网站主要针对平板电脑。谢谢

问HTML Mobile -forcing隐藏的软键盘
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Mobile -forcing隐藏的软键盘EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Mobile -forcing隐藏的软键盘
EN