我在一台具有大量数字的设备上呈现用户,如下所示:
123 879 233 223 211 782 782
可以看出,这些数字以三个块的形式呈现.
现在用户应该在另一台设备上输入这些号码.
我想以他/她打字的方式呈现它们.
所以我现在有一个
input type=number pattern='\d*'
我希望它基本上是(伪):
type=text keyboard=numbers pattern='[0-9]{3}[0-9]{3} ...'
类型编号在移动设备上很有用,因为它只显示数字键盘,在这种情况下,它更具相关性和用户友好性.
1)有没有办法获得标准输入类型=文本的数字键盘?
2)如果没有,有没有办法格式化输入数字输入字段的数字?
3)如果没有,我们可以因无能而解雇所有参与W3C的人吗?他们可以在其上引入模式,而不是保持输入类型=文本,并允许使用键盘=数字的属性.
最佳答案 干得好,
我有两个输入字段.一个具有类型编号,定位:绝对和隐藏使用不透明度.
当您将输入聚焦到类型时,隐藏的数字输入将被聚焦.
拾取输入并将其放入可视输入类型文本中.
<input type=number name=keyboard pattern='\d{18}' style='opacity:0; position:absolute;' />
<input type=text name=guid placeholder='18 digits' />
<script>
var
form = div.find('> .form > form'),
keyboard = form.find('input[name=keyboard]'),
guid = form.find('input[name=guid]')
;
guid.on('focus', function() {
keyboard.focus();
});
keyboard.on('input', function(){
var tmp = keyboard.val(), val = '';
var i = -1;
while ( ++i < tmp.length ) {
if ( i > 0 && i % 3 === 0 ) {
val += ' ';
}
val += tmp.charAt(i);
}
guid.val(val);
});
</script>
注意可见性:隐藏;或显示:无;至少在Chrome中不起作用.
编辑:上面已简化为一个输入声明和一个方法调用:
<input type=text name=guid placeholder='18 digits' modulo='3' max='18' />
function numberInput(input) {
var modulo = parseInt(input.attr('modulo'));
var max = parseInt(input.attr('max')) || Infinity;
var keyboard = $('<input type=number pattern="\d*" style="opacity:0; position:absolute;">');
keyboard.insertBefore(input);
input.on('focus', function() {
keyboard.focus();
});
keyboard.on('input', function fn(){
var tmp = keyboard.val(), val = '';
if ( tmp.length > max ) {
keyboard.val( tmp = tmp.substring(0, max) )
}
var i = -1;
while ( ++i < tmp.length ) {
if ( i > 0 && i % 3 === 0 ) {
val += ' ';
}
val += tmp.charAt(i);
}
input.val(val);
// Trigger original event for external listeners
input.trigger.apply(input, arguments);
// Note, the event target passed to trigger is now on the wrong object. To get the right object, simply change it to:
// input.trigger.call(input, 'input', arguments);
// Note that for the latter, attempts to modify the value won't get picked up.
});
}