首页 新闻 搜索 专区 学院

『求助』手机号码3-4-4格式利用js或者Jquery怎么实现

0
悬赏园豆:200 [已解决问题] 解决于 2016-12-08 17:49

在一个输入框内

<input type="text" placeholder="手机号码" class="bode" id="tel" maxlength="11">当输入手机号码时,自动变成3-4-4格式,例如:136 6666 6666,在长度为3和8后面添加一个空格,自己试着写了下,

var tel_len = this.value.length;

if (tel_len ===3 || tel_len ===8) {
this.value += " ";
}

获取其值的长度,然后在长度为3和8后面添加一个空格,但是感觉行不通,bug太多,删除起来有停顿,而且是移动端根本没法删除,园里的大神多,希望有朋友能帮忙解决下问题,万分感谢,附上例子或者原码进行参考就更好了。

痞子Geeking的主页 痞子Geeking | 初学一级 | 园豆:9
提问于:2016-11-07 15:47
< >
分享
最佳答案
0
// 手机号码3-4-4格式
$(function(){
            $('#tel').bind('input propertychange',function(){
                $(document).keydown(function(event){
                    if(event.keyCode==8){
                        return;
                    }if($('#tel').val().length == 3 || $('#tel').val().length == 8){
                        var phone = $('#tel').val()+" ";
                        $('#tel').val(phone);
                    }
                })
            });
            function emptyAll(str,global){
                var telre;
                telre = str.replace(/(^\s+)|(\s+$)/g,"");
                if(global.toLowerCase() == "g"){
                    telre = telre.replace(/\s/g,"");
                }
                return telre;
            };
            emptyAll($('#tel').val(),"g");
        });

已解决,谢谢大家,在网上找到一个答案,测试了可以使用,谢谢园里回答问题的朋友,我都不知道怎么分配这个园豆了

痞子Geeking | 初学一级 |园豆:9 | 2016-11-16 10:26

全给我就好了:)

晓菜鸟 | 园豆:2594 (老鸟四级) | 2016-11-21 11:21
其他回答(7)
0

正则匹配可以么:

reg=/([0-9]{0,3})([0-9]{0,4})?([0-9]+)?/;

$('.bode').val(reg.exec($('.bode').val()).splice(1).join(' '))

收获园豆:20
Thancoo | 园豆:144 (初学一级) | 2016-11-07 16:03

哥们,这个好像行不通,谢谢

支持(0) 反对(0) 痞子Geeking | 园豆:9 (初学一级) | 2016-11-07 17:25
0

<input type="text" placeholder="手机号码"  maxlength="13" onkeydown="if(event.keyCode==8){return;}if(value.length==3||value.length==8){value+=' '}"/>

收获园豆:30
刘宏玺 | 园豆:14006 (专家六级) | 2016-11-07 16:11

大兄弟,你这个差不多实现了,就是输入最后四位数字的时候会出现问题,倒数第四个数字会跑到倒数第一位

支持(0) 反对(0) 痞子Geeking | 园豆:9 (初学一级) | 2016-11-07 17:20

@痞子Geeking: http://jsbin.com/yusokajiwu/edit?html,output

你确定,不应该出现这种问题吧!

支持(0) 反对(0) 刘宏玺 | 园豆:14006 (专家六级) | 2016-11-07 17:34

@刘宏玺: 是的,我在手机UC浏览器上测试就出现这种情况,PC上是没问题

支持(0) 反对(0) 痞子Geeking | 园豆:9 (初学一级) | 2016-11-07 17:43
0

2楼正解,亲测是可以的

收获园豆:5
balahoho | 园豆:2048 (老鸟四级) | 2016-11-07 17:24
0

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" class="bode"/>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(".bode").on("keyup",function(){
var $val=$(".bode").val();
//if($val.length>2 && $val.length<4 || $val.length>7 && $val.length<9){
if($val.length == 3 || $val.length == 8){
$val=$val+" ";
}
$(".bode").val($val);
})
</script>
</html>

以上两种判断均可实现

收获园豆:20
dongxiaolei | 园豆:236 (菜鸟二级) | 2016-11-08 17:46
0
<div id="win">
    <p><label>手机号码:</label><input type="text" id="test" maxlength="13" value="" onkeyup="doSet(this)"></p>
</div>
<script type="text/javascript">
    function doSet(dom) {
        var phone = dom.value;
        var pLength = phone.length;
        
        if(pLength > 3) {
            phone = phone.replace(/\s*/g, "");
            if(phone.length > 7) {
                phone = phone.replace(/^(...)(....)/g, "$1 $2 ");
            } else if(phone.length > 3) {
                phone = phone.replace(/^(...)/g, "$1 ");
            }
        }
        
        dom.value = phone;
    }
</script>

你还得考虑粘贴吧?!所以,这样才合理。^_^

收获园豆:35
snowsolf | 园豆:233 (菜鸟二级) | 2016-11-10 09:52
0
// input keyup

var num = $("#tel").val();
if (num.charAt(num.length - 1) != " ") {
    var arr = $("#tel").val().replace(" ", "").split("");
    if (arr.length > 3 && arr[3] != " ") {
        arr.splice(3, 0, " ");
    }
    if (arr.length > 8 && arr[8] != " ") {
        arr.splice(8, 0, " ");
    }
    num = arr.join("");
} else {
    num = num.substr(0, num.length - 1);
}
$("#tel").val(num);

 

收获园豆:10
月光木叶 | 园豆:231 (菜鸟二级) | 2016-11-14 09:38
0

我之前也遇到过类似的问题,楼主可以看看,有问题一起探讨!

js实现填写身份证号、手机号、准考证号等信息自动空格的效果

 

收获园豆:80
晓菜鸟 | 园豆:2594 (老鸟四级) | 2016-11-15 14:08

谢谢大兄弟,博文很有用

支持(0) 反对(0) 痞子Geeking | 园豆:9 (初学一级) | 2016-11-16 10:29

@痞子Geeking: 有帮助就好!

支持(0) 反对(0) 晓菜鸟 | 园豆:2594 (老鸟四级) | 2016-11-21 11:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册