码迷,mamicode.com
首页 > 移动开发 > 详细

[每日一练]输入手机号码时的放大提示

时间:2014-12-13 21:45:22      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   sp   java   on   

常用功能,练练手。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#amplify
{
 width:145px;
 height:40px;
 text-align:center;
 font-size:18px;
 color:orange;
 background-color:#ffff99;
}
</style>
</head>
<body>
<div id="amplify"></div>
<input type="text" id="mobileNumber" maxlength="11" onkeyup="show()"/>
<script type="text/javascript">
function show(){
    var tmp=document.getElementById("mobileNumber").value,length=tmp.length,output=tmp;
    if(length>3&&length<=7){
        output=tmp.replace(/(^\d{3})/,"$1-");
    }
    else if(length>7){
        output=tmp.replace(/(^\d{3})(\d{4})/,"$1-$2-");
    }
    document.getElementById("amplify").innerHTML=output;
}
</script>
</body>
</html>


效果图

bubuko.com,布布扣

[每日一练]输入手机号码时的放大提示

标签:style   blog   http   io   ar   color   sp   java   on   

原文地址:http://www.cnblogs.com/linda586586/p/4161816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!