iOS html5 键盘 小数点,javascript – iOS5默认显示数字键盘,不使用type =“number”或type =“tel”...

对字段进行样式以包含符号

当涉及到在这个数字字段中包括符号，你可以使用一些walkaround像：

HTML：

$

CSS：

#number-container {

position: relative;

}

#number-container-symbol {

left: 5pt;

position: absolute;

top: 0px;

}

#number-field {

background-color: transparent;

padding-left: 10pt;

}

将其视为概念的证明。有关实例，请参见this jsfiddle。看起来像在Chrome：

定义更小的粒度

基于the documentation on number input (Editor’s Draft)，要定义粒度，您需要添加step =“< some-floating-point-number>”属性到< input>标签：

它将在许多现代浏览器中工作。见this jsfiddle测试。

结论

你应该能够设置它包含你需要的符号。还有一个功能，根据文档，支持浮点数。

替代解决方案 – 在其他东西前面的空字段

你也可以欺骗别人相信他看到的输入字段的内容，但显示他的东西在场后面(这是我的原始解决方案的一些扩展)。然后，如果有人点击字段，你可以传播适当的值等，然后回到模糊前的状态。看到这段代码(live example on jsfiddle – 蓝色意味着你在看不在字段内的东西)：

// 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('');

});

(带样式的完整代码在提到的jsfiddle)。代码需要缩短&清理，但它是一个概念的证明。请尝试并分享您的发现。