快捷導(dǎo)航

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

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

本文主要介紹了js實(shí)現(xiàn)顯示手機(jī)號(hào)碼效果的實(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)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

TypeScript面向?qū)ο蟪敿?xì)分析
面向?qū)ο蟆脒M(jìn)行執(zhí)行某個(gè)事件，就去找事件對(duì)應(yīng)的對(duì)象，把事情落實(shí)到對(duì)象身上，在程序中一切皆是對(duì)象，對(duì)象包含屬性和方法，面向?qū)ο笕筇卣鳎悍庋b、繼承、多態(tài)
2022-10-10
js 中的柯里化與反柯里化的基礎(chǔ)概念和用法
柯里化是將接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換成一系列只接受單個(gè)參數(shù)的函數(shù)的過程，而反柯里化是將柯里化函數(shù)轉(zhuǎn)換成接受多個(gè)參數(shù)的函數(shù)的過程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下
2023-07-07
JS加密解密之保存到桌面書簽
漸進(jìn)式Web應(yīng)用是一種結(jié)合了網(wǎng)頁和原生移動(dòng)應(yīng)用（Native App）優(yōu)點(diǎn)的新型應(yīng)用開發(fā)模式,這篇文章給大家介紹JS加密解密之保存到桌面書簽的操作方法,感興趣的朋友跟隨小編一起看看吧
2024-03-03
JavaScript數(shù)組reduce常見實(shí)例方法
reduce方法在數(shù)組的每個(gè)元素上執(zhí)行用戶提供的回調(diào)函數(shù),即"reducer",它傳入對(duì)前一個(gè)元素進(jìn)行計(jì)算的返回值,結(jié)果是單個(gè)值,它是在數(shù)組的所有元素上運(yùn)行reducer的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce常見實(shí)例方法的相關(guān)資料,需要的朋友可以參考下
2022-05-05
javascript查詢字符串參數(shù)的方法
這篇文章主要介紹了javascript查詢字符串參數(shù)的方法,實(shí)例分析了javascript獲取URL中對(duì)應(yīng)參數(shù)的使用技巧,需要的朋友可以參考下
2015-01-01
js點(diǎn)擊button按鈕跳轉(zhuǎn)到另一個(gè)新頁面
點(diǎn)擊按鈕怎么跳轉(zhuǎn)到另外一個(gè)頁面呢？點(diǎn)擊圖片要跳轉(zhuǎn)到新的頁面時(shí)，怎么做到呢？可以使用onclick=window.location=新頁面來實(shí)現(xiàn)
2014-10-10
lightBox 簡易的全屏透明遮罩解決方法
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過計(jì)算頁面大小，然后覆蓋一個(gè)與頁面同等大小的層實(shí)現(xiàn)，如騰訊qzone, wordpress后臺(tái)。
2010-06-06
老生常談ES6中的類
下面小編就為大家?guī)硪黄仙Ｕ凟S6中的類。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
js簡單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼
這篇文章介紹了js簡單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼，有需要的朋友可以參考一下
2013-11-11
js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效代碼分享
這篇文章主要介紹了js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效,需要的朋友可以參考下
2015-08-08