Question

随着SOS5的释放,Amp公司将自己的鉴定添加到投入类型=“编号”领域。这个问题概括如下:

投入型号=新编号,删除了Safari, Rii,5和Mac最新的Satos的头零和格式。

虽然投入类型=“电话”有助于在电话上架设一个数字键盘,但该星座标有电话键盘,没有点数。

利用html/js确定数字基垫是否可行? 这并不是说话。至少,我需要人数和关键台上的精子。

<>Update>

在Safat 5.1/iOS 5号投入田中,只有数位数和小数点。我的投入之一是$500,000/strong>。因此,Safari显示一个空白投入领域,因为美元、 %的特性无效。

Furthermore, when I run my own validation onblur, Safari clears the input field because I m adding a $ to the value.

因此,Safs 5.1/iOS5执行投入类型=“编号”已使其无法使用。

<>strong>jsfiddle

Try it here - 拖欠价值500 000美元的款项出现在Safat 5.1,但如果你去掉美元和符号,就会去掉。令人沮丧。

Answer 1

Working solution: Tested on iPhone 5, Android 2.3, 4

采用<代码><span>的Tadeck(bounty得主)解决方案,以包含投入领域标志,并设置格式格式<span>,以货币投入为重,基本上是我结束的工作。

My final code is different and shorter however so I m posting it here. This solution resolves the iOS5 validation issue of $ , % symbols inside input fields and so input type="number" can be used by default.

Symbol field eg. "xx %" "xx years"

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>

Simply use a number input field and a span outside the input to display the symbol.

Currency field eg. "$xxx,xxx"

<span id="formatted-currency">$500,000</span>
<input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />

Position the span on top of the currency input and set the input to display:none
When a user clicks/taps on the span, hide the span and show the input. If you position the span perfectly the transition is seamless.
The number input type takes care of the validation.
On blur and submit of the input, set the span html to be the input s value. Format the span. Hide the input and show the span with the formatted value.

$( #formatted-currency ).click(function(){
    $(this).hide();
    $( #currency-field ).show().focus();
});
$( #currency-field ).blur(function(){
    $( #formatted-currency ).html(this.value);
    $( #formatted-currency ).formatCurrency({
        roundToDecimalPlace : -2
    });
    $(this).hide();
    $( #formatted-currency ).show();
});
// on submit
$( #formatted-currency ).html($( #currency-field ).val());
$( #formatted-currency ).formatCurrency({
    roundToDecimalPlace : -2
});
$( #currency-field ).hide();
$( #formatted-currency ).show();

Answer 2

Styling the field to contain symbols

在此处插入符号时,编号在实地,你可以采取一些行动,如:

传真:

<span id="number-container">
    <input type="number" name="number" id="number-field" value="500" />
    <span id="number-container-symbol">$</span>
</span>

CSS:

#number-container {
    position: relative;
}
#number-container-symbol {
    left: 5pt;
    position: absolute;
    top: 0px;
}
#number-field {
    background-color: transparent;
    padding-left: 10pt;
}

视之为概念的证明。 See this jsfiddle for a Live example. 参看 Chrome:

“entergraph

Defining smaller granularity

以,>define granularity , 您需要添加pan=< 某些-floating-point- number> 属性;input>

<input type="number" name="number" value="500.01" step="0.01" />

and it will work in many modern browsers. See this jsfiddle for tests.

Conclusion

You should be able to style it to contain symbols you need. There is also a feature that, according to documentation, enables support for floating-point numbers.

Alternative solution - empty field in front of something else

You can also trick someone into believing he is seeing content of the input field, but show him something else behind the field (this is some extension of my original solution). Then if someone taps the field, you can propagate proper value etc., then go back to the previous state on blur. See this code (live example on jsfiddle - blue color means you are looking at something that is not within the field):

// store original value from INPUT tag in jQuery s .data()
var input_field = jQuery( #number-field );
var display_span = jQuery( #number-container-value );
var base_val = parseFloat(input_field.val());
input_field.data( storedVal , base_val);
input_field.val(  );
display_span.html(base_val);

// react to field gaining and losing focus
jQuery( #number-field ).on( focus , function(event){
    var el = jQuery(this);
    var display = jQuery( #number-container-value );
    if (typeof el.data( storedVal ) !=  undefined ){
        el.val(el.data( storedVal ));
    };
    display.html(  );
}).on( blur , function(event){
    var el = jQuery(this);
    var display = jQuery( #number-container-value );
    var new_val = parseFloat(el.val());
    el.data( storedVal , new_val);
    display.html(new_val);
    el.val(  );
});

(the full code with styling is on the mentioned jsfiddle). The code needs shortening & cleaning up, but it is a proof of concept. Try it and share your findings, please.

Answer 3

为什么不将美元放在投入领域之外(作为标签)。或百分比表示投入领域的权利? Seems such d解决了你的问题,你能够使用投入类型=“编号”,而只是工作。

Answer 4

你在岩石和硬地之间 st。在<代码> 类型=“货币”的“超声频谱”中(并且各国可能从未以不同方式书写货币)中出现过一起之前,你将不得不利用一些联合材料来解决这一问题。

当然,数字和电话胜算是最佳想法,但利用“一号共同提交文件”这一解决办法:

var i   = document.getElementById(  input  );

i.onblur    = function()
{
    i.type  =  text ;

    i.value = number_format( i.value );
}

i.onfocus   = function()
{
    var v   = Number( i.value.replace( /D/,    ) );

    i.type  =  number ;

    i.value = v > 0 ? v :   ;
}

简言之,我根据重点/重点对投入类型进行总结,这意味着一旦用户离开案文领域,我们就能够形成格式。当用户返回时,如果存在“ s”;0,我们就把这个价值 back回。在此工作测试中,我希望它能帮助:。

Answer 5

The following pops up the numeric keyboard for iPad with iOS5, allows any character to be typed, and allows any value to be set:

<input type="text" pattern="d*">

然而,这显然很脆弱(很可能今后会中断......),而单单单单单单单单单单单单单单单单单单体显示只有0到9个允许的数字基垫。解决办法似乎只是使用模式<代码>d*或其相应的<代码>[0-9]*。

Maybe better to use type="tel" which seems to act the same.

Answer 6

我也存在同样的问题,并带着这种死伤的解决办法,迫使iPad挤掉了数字键盘。

我的问题是,除数字外,聋af人过滤所有东西,如果填表,我需要不同的额外性,例如“3/7”或“65美元”。

var elem = document.getElementById( MathAnswer );
elem.type =  number ;

elem.onfocus = function() {
  setTimeout(function() {
    elem.type =  text ; 
  }, 1);
};

它只是将投入类型重新排在案文后<>。 iPad显示数字键盘,voila,safari不再删除任何非数字。

希望能帮助人们!

Answer 7

围绕“i”问题可能还有另一种方式:

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type= number " onfocus="this.type= text " />

更改前>的类型投入在触及时具有重点(即数字键盘显示),然后改动案文的类型,以便编辑正确的价值。

要想可靠地开展工作,可能很难做到,例如,目前接触到投入,但随后的滑坡inger取控制,使它成为“数量”的类型,我可以想出一种办法,在关键问题上,除其他问题外,探测“次子”。

Answer 8

This solution works on iPad and iPhone, and even Next/Previous work. Try http://fiddle.jshell.net/L77Cq/2/show/ (or http://jsfiddle.net/L77Cq/ to edit).

<!DOCTYPE html>
<head>
<style>
    .riggedinput::-webkit-input-placeholder {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
}
</style>
<script>
    function focused() {
        var test = document.getElementById( test );
        setTimeout(function() { // timeout needed so that keyboard changes to numeric when using Next/Previous keyboard navigation buttons
            if (document.activeElement === test) {
                test.type =  text ;
                test.value = test.placeholder;
                test.placeholder =   ;
            }
        }, 1);
    }
    function blurred() {
        var test = document.getElementById( test );
        var value = test.value;
        test.placeholder = value;
        test.value =   ;
        test.type =  number ;
    }
    if (!/^(iPhone|iPad|iPod)$/.test(navigator.platform)) alert ( Code specific to Mobile Safari );
</script>
</head>
<body>
    <input>
    <input id="test" type="number" class="riggedinput" placeholder="$100.10USD" onfocus="focused()" onblur="blurred()">
    <input>
</body>

It still has the following issues: * If using forms, needs to copy value to a hidden field. * For some reason the page scrolls funny (iPhone address bar hides, iPad Debug Console hides).

PS: I found this technique independently of Ahmed Nuaman s comment above (I had tried it in the past, and noticed his comment just now - arrrgh!).

Answer 9

Your problem would be solved if Safari would support the HTML5 inputmode attribute for input elements. Nobody knows if, or when that is going to happen. In the meantime this link provides some interesting reading.

Answer 10

We ended up using a hacky solution to enable the numbersandpunctuation keyboard to show when focused which works on an iPhone: we record the keypresses and simulate the value.

。

我们试图将投入类型从类型=编号改为重点内容的类型,但并不可靠:(1) 数字键盘显示时间的100%;(2) 如果一个表格比屏幕长,那么显示有重点投入的自动滚动就会完全瘫痪(有时重点投入会被筛选或放在虚拟键盘下)。

显示数字键盘(例如type=tel)确实允许切碎点或上校入境。

关于iPad,你只能使用<input category=text patterns=[0-9]*>,以显示数字和punctiation key板,但解决办法是Pi(Pi)的t工作(显示数字基垫,没有小数点)。