如何部分完成文本输入

时间:2011-04-25 20:04:42

标签: jquery validation html5 autocomplete

我知道标题并没有捕捉到我想要问的内容,但这是我正在尝试做的事情:

//所需格式为:123-123-1234

当用户输入123(前三个字符)时,如何附加连字符 - 然后,当用户输入123(后三个字符)时,如何再次附加连字符 然后允许用户只输入最后四个数字?

我有一个验证我想要的美国电话号码格式的功能:

/* US Phone # */
'us_phonenumber':function($fld) {
    var v = $fld.val();

    if(v.length == 0) {
        return true;
    }
    return /^\d{3}-\d{3}-\d{4}$/.test(v);
},

好奇我是否可以在仍然验证

的同时添加某种部分自动完成方法

2 个答案:

答案 0 :(得分:1)

<强> HTML:

<input type="text" />
<br /><a href="#" id="check">Click me!</a>

<强> JS:

$("#check").click(function(){
    var pNum = $("input").val();
    var vNum = pNum.slice(0, 3)+"-"+pNum.slice(3, 6)+"-"+pNum.slice(6, 10);
    $("input").val(vNum);
    return false;
});

小提琴:http://jsfiddle.net/ueyhE/

输入您的号码,然后按“点击我!”。

修改

使用change()

$("input").click(function(){
    var pNum = $(this).val();
    var vNum = pNum.slice(0, 3)+"-"+pNum.slice(3, 6)+"-"+pNum.slice(6, 10);
    $(this).val(vNum);
});

答案 1 :(得分:0)

我不知道在输入期间做什么,但在输入完成后可能会减少用户的混淆,或者错误的余地。

var string = '1234567890';
var formattedString = '';
var index;
for (var i = 0; i < string.length; i++) {
    index = string.charAt(i);   
    (i == 3 || i == 6) ? formattedString = formattedString + '-' + index : formattedString = formattedString + index;
}
alert(formattedString);