blocks|key|666271|text|你可以做<input+type="text"+pattern="\d*">。这将导致出现数字键盘。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|666272|有关更多细节，请查看此处：Text,+Web,+and+Editing+Programming+Guide+for+iOS|666273|​|666274|<form>
++<input+type="text"+pattern="\d*">
++<button+type="submit">Submit</button>
</form>|code-block|syntax|javascript|666275|666276|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html^0|4|X|0|D|1C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>You can do <code>&lt;input type="text" pattern="\d*"&gt;</code>.  This will cause the numeric keyboard to appear.</p>

<p>See here for more detail: <a href="https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html" rel="noreferrer">Text, Web, and Editing Programming Guide for iOS</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;input type="text" pattern="\d*"&gt;
  &lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|666561|text|<input+type="text"+inputmode="numeric">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|666562|使用Inputmode，你可以给浏览器一个提示。|unstyled|offset|length|666563|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#feat=input-inputmode^0|0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>&lt;input type="text" inputmode="numeric"&gt;
</code></pre>

<p>With <a href="https://caniuse.com/#feat=input-inputmode" rel="noreferrer">Inputmode</a> you can give a hint to the browser.</p>


blocks|key|883433|text|至少在某些手机上，使用type="email"或type="url"会给你一个键盘，比如iPhone。对于电话号码，您可以使用type="tel"。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|883434|entityMap^0|B|C|O|A|1R|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Using the <code>type="email"</code> or <code>type="url"</code> will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use <code>type="tel"</code>.</p>


blocks|key|666309|text|使用<input+type="text"+pattern="\d*">调出数字键盘是有危险的。在firefox和chrome上，模式中包含的正则表达式会使浏览器验证该表达式的输入。如果它与模式不匹配或保留为空，则会发生错误。注意其他浏览器中的意外操作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|666310|entityMap^0|2|X|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>There is a danger with using the <code>&lt;input type="text" pattern="\d*"&gt;</code> to bring up the numeric keyboard. On firefox and chrome, the regular expression contained within the pattern causes the browser to validate the input to that expression. errors will occur if it doesn't match the pattern or is left blank. Be aware of unintended actions in other browsers.</p>


blocks|key|883882|text|您可以使用inputmode+html属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|883883|<input+type="text"+inputmode="numeric"+/>|code-block|syntax|javascript|883884|有关更多详细信息，请查看MDN+document+on+inputmode。|883885|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode^0|5|9|0|0|C|P|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can use <code>inputmode</code> html attribute:</p>
<pre><code>&lt;input type=&quot;text&quot; inputmode=&quot;numeric&quot; /&gt;
</code></pre>
<p>For more details, check-out the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" rel="noreferrer">MDN document on inputmode</a>.</p>


blocks|key|883467|text|我认为type="number"对于语义网页来说是最好的。如果您只想更改键盘，可以使用type="number"或type="tel"。在这两种情况下，iPhone都不限制用户输入。用户仍然可以键入(或粘贴)他/她想要的任何字符。唯一的变化是显示给用户的键盘。如果你想要更多的限制，你需要使用JavaScript。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|883468|entityMap^0|3|D|17|D|1L|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>I think <code>type="number"</code> is the best for semantic web page. If you just want to change the keyboard, you can use <code>type="number"</code> or <code>type="tel"</code>. In both cases, iPhone doesn't restrict user input. User can still type in (or paste in) any characters he/she wants. The only change is the keyboard shown to the user. If you want any restriction beyond this, you need to use JavaScript.</p>


blocks|key|666416|text|对我来说，最好的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|666417|对于整数，在android和iphone上显示0-9键盘|666418|<label+for="ting">
<input+id="ting"+name="ting"+type="number"+pattern="[\d]*"+/>|code-block|syntax|javascript|666419|您可能还想这样做，以隐藏在firefox/chrome/safari中的微调器，大多数客户认为它们看起来很丑陋|666420|+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button+{
++++++-webkit-appearance:+none;
++++++margin:+0;
+}

+input[type=number]+{
++++++-moz-appearance:textfield;
+}|666421|如果您正在进行自定义验证，则将novalidate='novalidate‘添加到您的表单元素|666422|Ps以防你确实想要浮点数，步进到你想要的任何精度，将添加‘’。到android|666423|<label+for="ting">
<input+id="ting"+name="ting"+type="number"+pattern="[\d\.]*"+step="0.01"+/>|666424|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>For me the best solution was:</p>

<p>For integer numbers, which brings up the 0-9 pad on android and iphone</p>

<pre><code>&lt;label for="ting"&gt;
&lt;input id="ting" name="ting" type="number" pattern="[\d]*" /&gt;
</code></pre>

<p>You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly</p>

<pre><code> input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }
</code></pre>

<p>And add novalidate='novalidate' to your form element, if your doing custom validation</p>

<p>Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add '.' to android</p>

<pre><code>&lt;label for="ting"&gt;
&lt;input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" /&gt;
</code></pre>


blocks|key|883932|text|截至2020年|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883933|<input+type="number"+pattern="[0-9]*"+inputmode="numeric">|code-block|syntax|javascript|883934|css+tricks在这方面写了一篇非常好的文章：https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/|offset|length|883935|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/^0|0|0|P|1Z|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>as of 2020</p>
<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;number&quot; pattern=&quot;[0-9]*&quot; inputmode=&quot;numeric&quot;&gt;
</code></pre>
<p>css tricks did a really good article on it: <a href="https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/" rel="nofollow noreferrer">https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/</a></p>


blocks|key|883692|text|2018年：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883693|<input+type="number"+pattern="\d*">|code-block|syntax|javascript|883694|同时适用于安卓和iOS。|883695|我在安卓(%5E4.2)和iOS+(11.3)上进行了测试。|883696|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In 2018:</p>

<pre><code>&lt;input type="number" pattern="\d*"&gt;
</code></pre>

<p>is working for both Android and iOS.</p>

<p>I tested on Android (^4.2) and iOS (11.3)</p>


blocks|key|883550|text|您可以像这样尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883551|<input+type="number"+name="input">
<input+type="submit"+value="Next"+formnovalidate="formnovalidate">|code-block|syntax|javascript|883552|但要小心:如果您的输入包含数字以外的内容，则不会将其传输到服务器。|883553|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|$]]

<p>You can try like this:</p>

<pre><code>&lt;input type="number" name="input"&gt;
&lt;input type="submit" value="Next" formnovalidate="formnovalidate"&gt;
</code></pre>

<p>But be careful: If your input contains something other than a number, it will not be transmitted to the server.</p>


blocks|key|883655|text|我找不到一种在所有情况下都适合我的类型:我需要默认为数字输入(例如输入"7.5“)，但在某些时候也允许文本(例如”pass“)。用户想要一个数字小键盘(例如，输入7.5+)，但需要偶尔输入文本(例如，“pass”)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883656|相反，我所做的是向表单添加一个复选框，并允许用户在“数字”和“文本”之间切换我的输入(id="inputSresult")。|883657|<input+type="number"+id="result"...+>
<label><input+id="cbAllowTextResults"+type="checkbox"+...>Allow+entry+of+text+results.</label>|code-block|syntax|javascript|883658|然后，我将一个click处理程序连接到checkbox，它根据上面的复选框是否被选中来在文本和数字之间切换类型：|883659|$(document).ready(function+()+{
++++var+cb+=+document.getElementById('cbAllowTextResults');
++++cb.onclick+=+function+(event)+{
++++++++if+($("#cbAllowTextResults").is(":checked"))
++++++++++++$("#result").attr("type",+"text");
++++++++else
++++++++++++$("#result").attr("type",+"number");

++++}
});|883660|这对我们来说效果很好。|883661|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I couldn't find a type that worked best for me in all situations: I needed to default to numeric entry (entry of "7.5" for example) but also at certain times allow text ("pass" for example).  Users wanted a numeric keypad (entry of 7.5 for example) but occasional text entry was required ("pass" for example).</p>

<p>Rather what I did was to add a checkbox to the form and allow the user to toggle my input (id="inputSresult") between type="number" and type="text".</p>

<pre><code>&lt;input type="number" id="result"... &gt;
&lt;label&gt;&lt;input id="cbAllowTextResults" type="checkbox" ...&gt;Allow entry of text results.&lt;/label&gt;
</code></pre>

<p>Then I wired a click handler to the checkbox that toggles the type between text and number based on whether the checkbox above is checked:</p>

<pre><code>$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});
</code></pre>

<p>This worked out well for us.</p>


blocks|key|666627|text|+<input+type="text"+inputmode="decimal">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|666628|它将提供使用数字键盘的文本输入|unstyled|666629|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> &lt;input type="text" inputmode="decimal"&gt;
</code></pre>

<p>it will give u text input using numeric key-pad</p>


blocks|key|883711|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883712|$(document).ready(function()+{
++++$(document).find('input[type=number]').attr('type',+'tel');
});|code-block|syntax|javascript|883713|参考：https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask|offset|length|883714|entityMap|0|LINK|mutability|MUTABLE|url|https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask^0|0|0|3|2I|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>try this:</p>

<pre><code>$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});
</code></pre>

<p>refer: <a href="https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask" rel="nofollow noreferrer">https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask</a></p>


<p>Is there a way to force the number keyboard to come up on the phone for an <code>&lt;input type="text"&gt;</code>? I just realized that <a href="http://www.w3.org/TR/html-markup/input.number.html" rel="noreferrer"><code>&lt;input type="number"&gt;</code></a> in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc.</p>

<p>I want to emulate the numeric-keyboard functionality of <code>&lt;input type="number"&gt;</code>, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate <code>input</code> type that does that?</p>


Phone: numeric keyboard for text input

服务器

HTML5

有没有办法让<input type="text">的数字键盘出现在手机上？我刚刚意识到HTML5中的是用于“浮点数”的，所以它不适合用于信用卡号码、邮政编码等。我想模拟<input type="number">的数字键盘功能，用于接受浮点数以外的数值的输入。也许有另一种合适的input类型可以做到这一点？

问Phone:用于文本输入的数字键盘
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Phone:用于文本输入的数字键盘EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Phone:用于文本输入的数字键盘
EN