blocks|key|1650931|text|目前，JavaScript是唯一的解决方案。下面是最简单的方法(使用jQuery)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1650932|HTML|1650933|<input+type="text">|code-block|syntax|javascript|1650934|JavaScript|1650935|$('input[type="text"]').on('touchstart',+function()+{
++$(this).attr('type',+'number');
});

$('input[type="text"]').on('keydown+blur',+function()+{
++$(this).attr('type',+'text');
});|1650936|这个想法很简单。输入开始并以type="text“结束，但它在touchstart事件上短暂地变成了type="number”。这将导致出现正确的iOS键盘。一旦用户开始输入任何输入或离开字段，输入就会再次变成type="text“，从而规避验证。|1650937|这种方法有一个缺点。当用户返回到已填写的输入时，输入将丢失(如果不验证的话)。这意味着用户将无法返回并编辑以前的字段。在我的例子中，这并没有那么糟糕，因为用户可能想用不同的值一次又一次地使用计算器，所以自动删除输入将节省他们几个步骤。然而，这在所有情况下都可能是理想的。|1650938|看起来Mobile支持电子邮件、号码、搜索、电话和url等新的HTML5输入类型属性。这些将切换显示的键盘。请参阅type属性。|1650939|例如，您可以这样做：：|offset|length|style|BOLD|1650940|<input+type="number"+/>|1650941|当输入框有焦点时，显示数字键盘(就像用户有完整的键盘并按下"123“按钮一样)。|1650942|如果你真的只想要数字，你可以指定：|1650943|<input+type="tel"+/>|1650944|，然后用户将获得拨号键盘.的电话号码|1650945|我知道这适用于Mobile+-我认为它只适用于UIWebView。|1650946|http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/|1650947|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|A|1|0|0|0|0|H|0|0|0|D|0|0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1M|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1O|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1R|8|@$U|1S|V|1T|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1U|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|1V|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1W|8|@$U|1X|V|1Y|W|X]]|9|@]|A|$]]|$1|14|3|15|5|F|7|1Z|8|@]|9|@]|A|$G|H]]|$1|16|3|17|5|6|7|20|8|@$U|21|V|22|W|X]]|9|@]|A|$]]|$1|18|3|19|5|6|7|23|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|24|8|@]|9|@$U|25|V|26|1|27]]|A|$]]|$1|1C|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|1B]]]]

<p>For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):</p>

<p>HTML</p>

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

<p>JavaScript</p>

<pre><code>$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});
</code></pre>

<p>The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.</p>

<p>There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.</p>

<p>It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.</p>

<p><strong>So for example, you could do this:</strong></p>

<pre><code>&lt;input type="number" /&gt;
</code></pre>

<p>And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.</p>

<p><strong>If you really only want numbers, you could specify:</strong></p>

<pre><code>&lt;input type="tel" /&gt;
</code></pre>

<p><strong>And then the user would get the phone number dialing keypad.</strong></p>

<p>I know this works with Mobile Safari -- I only assume it will work with UIWebView.</p>

<p><a href="http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/">http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/</a></p>


blocks|key|1650998|text|我制作了这个小片段来实现您想要的，并在iPhone+5+v7.0.3上进行了测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1650999|我使用e.which读取输入的CharCode，然后将其推入表示小数点之前的数字的数组中，并将另一个数组(后面)从(前)数组中移出小数点之后的值。|offset|length|style|CODE|1651000|由于我卑微的编程技巧，这看起来可能很复杂。|1651001|1)+代码演示+-+2)+货币换算演示|blockquote|BOLD|1651002|HTML：|1651003|<input+type="tel"+id="number"+/>|code-block|syntax|javascript|1651004|JS|1651005|变量和函数：|1651006|//+declare+variables
var+i+=+0,
++++before+=+[],
++++after+=+[],
++++value+=+[],
++++number+=+'';

//+reset+all+values
function+resetVal()+{
++++i+=+0;
++++before+=+[];
++++after+=+[];
++++value+=+[];
++++number+=+'';
++++$("#number").val("");
++++$(".amount").html("");
}

//+add+thousand+separater
function+addComma(num)+{
++return+num.toString().replace(/\B(?=(\d{3})%2B(?!\d))/g,+",");
}|1651007|主要代码：|1651008|//+listen+to+keyup+event
$("#number").on("keyup",+function+(e,+v)+{

++++//+accept+numbers+only+(0-9)
++++if+((e.which+>=+48)+&&+(e.which+<=+57))+{

++++++++//+convert+CharCode+into+a+number+++
++++++++number+=+String.fromCharCode(e.which);

++++++++//+hide+value+in+input
++++++++$(this).val("");

++++++++//+main+array+which+holds+all+numbers
++++++++value.push(number);

++++++++//+array+of+numbers+before+decimal+mark
++++++++before.push(value[i]);

++++++++//+move+numbers+past+decimal+mark
++++++++if+(i+>+1)+{
++++++++++++after.push(value[i+-+2]);
++++++++++++before.splice(0,+1);
++++++++}

++++++++//+final+value
++++++++var+val_final+=+after.join("")+%2B+"."+%2B+before.join("");

++++++++//+show+value+separated+by+comma(s)
++++++++$(this).val(addComma(val_final));

++++++++//+update+counter
++++++++i%2B%2B;

++++++++//+for+demo
++++++++$(".amount").html("+"+%2B+$(this).val());

++++}+else+{

++++++++//+reset+values
++++++++resetVal();
++++}
});|1651009|重置：|1651010|//+clear+arrays+once+clear+btn+is+pressed
$(".ui-input-text+.ui-input-clear").on("click",+function+()+{
++++resetVal();
});|1651011|结果：|1651012|​|1651013|📷|atomic|1651014|1651015|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Palestinian/wD293/|1|http://jsfiddle.net/Palestinian/YDCTr/|2|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/111b3bedfe350f11f60e9351dc51353e.png|imageAlt^0|0|3|7|F|8|0|0|0|2|A|2|3|4|0|D|6|1|0|0|0|0|0|0|0|0|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1X|8|@$D|1Y|E|1Z|F|G]|$D|20|E|21|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|22|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|23|8|@$D|24|E|25|F|M]|$D|26|E|27|F|M]]|9|@$D|28|E|29|1|2A]|$D|2B|E|2C|1|2D]]|A|$]]|$1|N|3|O|5|6|7|2E|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|2F|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|2G|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|2H|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|R|7|2I|8|@]|9|@]|A|$S|T]]|$1|10|3|11|5|6|7|2J|8|@]|9|@]|A|$]]|$1|12|3|13|5|R|7|2K|8|@]|9|@]|A|$S|T]]|$1|14|3|15|5|6|7|2L|8|@]|9|@]|A|$]]|$1|16|3|17|5|R|7|2M|8|@]|9|@]|A|$S|T]]|$1|18|3|19|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|1E|7|2P|8|@]|9|@$D|2Q|E|2R|1|2S]]|A|$]]|$1|1F|3|1B|5|6|7|2T|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|2U|8|@]|9|@]|A|$]]]|1H|$1I|$5|1J|1K|1L|A|$1M|1N]]|1O|$5|1J|1K|1L|A|$1M|1P]]|1Q|$5|1R|1K|1S|A|$1T|1U|1V|-4]]]]

<p>I made this little snippet to achieve what you want and I've tested it on iPhone 5 v7.0.3</p>

<p>I used <code>e.which</code> to read <code>CharCode</code> entered and then push it into an array (<em>before</em>) which represents digits before decimal mark and another array (<em>after</em>) to move values from (<em>before</em>) array past the decimal mark.</p>

<p>It might look complicated, due to my humble programming skills.</p>

<blockquote>
  <p><strong>1) <a href="http://jsfiddle.net/Palestinian/wD293/" rel="noreferrer">Code demo</a></strong> - <strong>2) <a href="http://jsfiddle.net/Palestinian/YDCTr/" rel="noreferrer">Currency conversion demo</a></strong></p>
</blockquote>

<h2>HTML:</h2>

<pre><code>&lt;input type="tel" id="number" /&gt;
</code></pre>

<h2>JS</h2>

<h3>Variables and functions:</h3>

<pre><code>// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';
    $("#number").val("");
    $(".amount").html("");
}

// add thousand separater
function addComma(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</code></pre>

<h3>Main code:</h3>

<pre><code>// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which &gt;= 48) &amp;&amp; (e.which &lt;= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input
        $(this).val("");

        // main array which holds all numbers
        value.push(number);

        // array of numbers before decimal mark
        before.push(value[i]);

        // move numbers past decimal mark
        if (i &gt; 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);
        }

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)
        $(this).val(addComma(val_final));

        // update counter
        i++;

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values
        resetVal();
    }
});
</code></pre>

<h3>Reset:</h3>

<pre><code>// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});
</code></pre>

<h3>Result:</h3>

<p><img src="https://i.stack.imgur.com/eCZ3f.png" alt="enter image description here"></p>


blocks|key|1651048|text|我认为您可以使用我向兰詹建议的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1651049|使用类似缓冲区的textfield。首先，您需要检测键盘何时出现，并检查第一个响应者是否是webview。然后你就成了第一个响应者的文本视图。|1651050|当您在webview的输入中设置文本时，可以添加一些逻辑来验证数字。|1651051|这里是我的示例项目与解决方案的链接，在您的示例中，您不需要更改inputView。但是方法是一样的，用一个男人在中间。|1651052|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/19961369/how-the-default-keyboard-comes-up-when-user-taps-in-uiwebview/20037193#20037193|1|https://github.com/dcorbatta/CKWebView^0|A|2|0|0|0|0|0|2|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<p>I think that you can use the same approach that I suggested to <a href="https://stackoverflow.com/questions/19961369/how-the-default-keyboard-comes-up-when-user-taps-in-uiwebview/20037193#20037193">Ranjan</a>.</p>

<p>Using a textfield like a buffer. First you need to detect when the keyboard appears and check if the first responder is the webview. Then you become a textview as the first responder.</p>

<p>When you are setting the text inside the input of the webview, you can add some logic to validate the number.</p>

<p><a href="https://github.com/dcorbatta/CKWebView" rel="nofollow noreferrer">Here</a> is a link of my example project with the solution, in your case you don't need change the inputView. But the approach is the same, use a Man in the middle.</p>


blocks|key|403814|text|不能在https://stackoverflow.com/a/19998430/6437391上发表评论，所以把它作为一个单独的答案.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|403815|这是与https://stackoverflow.com/a/19998430/6437391相同的想法，但不是切换类型，而是转换模式。|403816|当值与数值格式不匹配时，例如，如果值有分隔符(+1,234.56+)，这会导致不清除文本字段上的值的效果。|403817|$('input[type="text"]').on('touchstart',+function()+{
++$(this).attr('pattern',+'[0-9]*');
});

$('input[type="text"]').on('focus',+function()+{
++$(this).attr('pattern',+actualpattern);
});|code-block|syntax|javascript|403818|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/19998430/6437391|1^0|3|18|0|0|3|18|1|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|T]]]]

<p>Cant comment on <a href="https://stackoverflow.com/a/19998430/6437391">https://stackoverflow.com/a/19998430/6437391</a> so posting as a separate answer...</p>

<p>This is the same idea as <a href="https://stackoverflow.com/a/19998430/6437391">https://stackoverflow.com/a/19998430/6437391</a> but instead of switching the type, its the pattern that's switched.</p>

<p>This has the effect of not clearing the value on the textfield on focus when value does not match numeric format, for example, if the value has separators( 1,234.56 ). </p>

<pre><code>$('input[type="text"]').on('touchstart', function() {
  $(this).attr('pattern', '[0-9]*');
});

$('input[type="text"]').on('focus', function() {
  $(this).attr('pattern', actualpattern);
});
</code></pre>


<p>Is there a possiblity to force an iOS-device to show the numeric keyboard <strong>while using a custom pattern as input type</strong>?</p>
<p>my input pattern:</p>
<pre><code>&lt;input id=&quot;price&quot; class=&quot;numeric&quot; pattern=&quot;\d+((\.|,)\d{1,2})?&quot; name=&quot;price&quot; 
title=&quot;&quot; data-mini=&quot;true&quot; data-clear-btn=&quot;true&quot; autocomplete=&quot;off&quot; autofocus /&gt;
</code></pre>
<p>I want to type a currency value like '14.99' and show up a keyboard with access to numbers on the iOS device</p>
<pre><code>&lt;input type='number' /&gt;
&lt;input pattern='[0-9]*' /&gt;
&lt;input pattern='[\d]*' /&gt;
</code></pre>
<p>are all missing the decimal sign and/or are not validating as number when adding a decimal sign. An alternative way could be a javascript function which is creating the decimal sign on the right place, like pressing 1-&gt;2-&gt;9-&gt;9 in this order creates on keypress() 0.01-&gt;0.12-&gt;1.29-&gt;12.99,
but this requires the input field to be <code>type='text'</code> --&gt; obvious problem here is that the text keyboard is showed when focussing the input field.</p>
<p>How can I solve this issue?</p>
<h2>EDIT</h2>
<p>Environment:</p>
<ul>
<li>JQM 1.3.2</li>
<li>jquery 1.8.2</li>
</ul>


Force iOS numeric keyboard with custom / currency pattern

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否有可能强迫iOS设备在使用自定义模式作为输入类型时显示数字键盘？我的输入模式：<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price" title="" data-mini="true" data-clear-btn="...

问强制使用自定义/通用模式的iOS数字键盘
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制使用自定义/通用模式的iOS数字键盘EN