快捷導(dǎo)航

js實(shí)現(xiàn)顯示手機(jī)號碼效果

更新時(shí)間：2017年03月09日 11:42:07 作者：yonghuming

本文主要介紹了js實(shí)現(xiàn)顯示手機(jī)號碼效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>telephone number</title>
<style>
*{
    margin:0;
    padding:0;
}
form{
    width:300px;
    position:relative;
    margin:10px;
}
fieldset{
    padding:10px;
    border:1px dashed #ddd;
}
#num_info{
    display:none;
    position:absolute;
    left: 11px;
    bottom: 37px;
    width: 170px;
    height:30px;
    border:1px solid #ddd;
    border-bottom:none;
    background-color:#f6f6f6;
    font:20px/30px verdana,arial;
    color:#F90;    
}
#num{
    width:170px;
    height:24px;
    line-height:24px;
    margin-top:40px;
    border:1px solid #bbb;
}
#num:focus{
    outline:none;
    border-color:#999;
}
p{
    font-size:12px;
    color:#999;
}
</style>
</head>
<body>
<form>
    <fieldset>
        <label id="num_info" for="num"></label>
        <input type="text" id="num" maxlength="11">
    </fieldset>
</form>
<script>
window.onload=function(){
    var $numInfo=document.getElementById('num_info'),
        $num=document.getElementById('num'),
        _val,_val1,_val2;
    $num.onkeyup=function(){
        var val=this.value=this.value.replace(/[^\d]/g,''),
            len=val.length;    
        if(val!=''){$numInfo.style.display='block';}
        if(len<=3){
            _val=_val1= val.substr(0,3);
        }
        else if(len>3&&len<=7){
            _val=_val2=_val1+"-"+val.substr(3,len);
        }
        else if(len>7){
            _val=_val2+'-'+val.substr(7,len);
        }
        $numInfo.innerHTML=_val;
    }
    $num.onblur=function(){
        $numInfo.style.display='none';        
    }
}
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

IntersectionObserver API 詳解篇
這篇文章主要介紹了IntersectionObserver API 詳解篇,需要的朋友可以參考下
2016-12-12
JavaScript樹形組件實(shí)現(xiàn)無限級樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript樹形組件實(shí)現(xiàn)無限級樹形結(jié)構(gòu)，一種構(gòu)建多級有序樹形結(jié)構(gòu)JSON（或XML）數(shù)據(jù)源的方法，下面更多相關(guān)資料需要的小伙伴可以參考一下
2022-03-03
微信小程序webview中監(jiān)聽返回按鈕實(shí)現(xiàn)步驟
在微信小程序中webview返回鍵是一個(gè)非常實(shí)用的功能,它允許用戶在嵌入的網(wǎng)頁中返回到上一個(gè)頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實(shí)現(xiàn)步驟,需要的朋友可以參考下
2024-08-08
JavaScript實(shí)現(xiàn)網(wǎng)頁端播放攝像頭實(shí)時(shí)畫面
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)在網(wǎng)頁端播放局域網(wǎng)（不能上云）或是廣域網(wǎng)的攝像頭的實(shí)時(shí)畫面，文中的示例代碼講解詳細(xì)，需要的可以參考一下
2022-02-02
詳解JavaScript邏輯Not運(yùn)算符
這篇文章主要介紹了JavaScript邏輯Not運(yùn)算符，邏輯NOT運(yùn)算符與C和Java中的邏輯 NOT 運(yùn)算符相同，都由感嘆號（!）表示，想要深入了解邏輯Not運(yùn)算符的朋友可以參考一下
2015-12-12
js點(diǎn)擊列表文字對應(yīng)該行顯示背景顏色的實(shí)現(xiàn)代碼
這篇文章主要介紹了js點(diǎn)擊列表文字對應(yīng)該行顯示背景顏色的實(shí)現(xiàn)代碼,感興趣的小伙伴可以參考下
2015-08-08
微信小程序代碼上傳、審核發(fā)布小程序
這篇文章主要為大家詳細(xì)介紹了微信小程序代碼上傳、審核發(fā)布小程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
javascript彈出拖動窗口
在很多網(wǎng)頁上可以看到，點(diǎn)擊網(wǎng)頁的某個(gè)地方能夠彈出一個(gè)新窗口，并且可以在屏幕中隨意拖動，通過此篇文章給大家介紹javascript彈出拖動窗口，有需要的朋友可以參考下
2015-08-08
js多維數(shù)組降維的5種方法
本文主要介紹了js多維數(shù)組降維的5種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
js自動生成對象的屬性示例代碼
大家應(yīng)該都不知道js可以自動生成對象的屬性吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-10-10