jQuery手機號碼輸入提示
<!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>
<title>jQuery手機號碼輸入提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;}
#main{width:728px;height:300px;padding:60px;margin:0 auto;border:5px solid #CCC;}
input{border: 1px solid #666;}
.a{border: 1px solid red;}
.text-magnifier {
background:none repeat scroll 0 0 #FFFFE4;
border:1px solid #E6C99E;
color:#FF4800;
height:50px;
left:170px;
padding:5px 0 0 10px;
position:absolute;
top:30px;
width:200px;
font:20px Tahoma,Helvetica,Arial,Simsun,sans-serif;
}
.text-magnifier .mag-explain {
border-top:1px solid #E6C99E;
color:#6C6C6C;
font-size:12px;
margin-top:5px;
width:190px;
}
.fn-hide{display:none}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script>
$(function(){
$("#k").focus(function(evt){
$(this).addClass("a");
if(this.value.length>0){
a(this);
d(this);
}
})
$("#k").keyup(function(evt){
if(this.value.length==0){
e();
}else{
a(this);
}
d(this);
})
$("#k").blur(function(evt){
$(this).removeClass("a");
e();
this.value=this.value
})
})
//計算div的left和top,顯示div
function a(evt){
var y = 20;
y = $(evt).outerHeight();
$("#textMag").removeClass("fn-hide");
var t = $(evt).offset().top;
var l = $(evt).offset().left;
$("#textMag").css({
"top": (t+y) + "px",
"left":l + "px"
});
}
//隱藏div
function e(){
$("#textMag").addClass("fn-hide")
}
//控制div裡顯示的數字
function d(e){
var i = e.value;
i=$.trim(i);
var h=i.substring(0,3);
i=i.substring(3);
while(i&&i.length>0){
h+=" "+i.substring(0,4);
i=i.substring(4)
}
$("#mag-text").html(h);
}
</script>
</head>
<body>
<div id="main">
手機號碼:<input type="text" id="k" maxlength="11" class="i-text" value="" /><div class="text-magnifier fn-hide" id="textMag" >
<div id="mag-text" class="mag-text"></div>
<div class="mag-explain">手機號碼是11位數字</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery手機號碼輸入提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;}
#main{width:728px;height:300px;padding:60px;margin:0 auto;border:5px solid #CCC;}
input{border: 1px solid #666;}
.a{border: 1px solid red;}
.text-magnifier {
background:none repeat scroll 0 0 #FFFFE4;
border:1px solid #E6C99E;
color:#FF4800;
height:50px;
left:170px;
padding:5px 0 0 10px;
position:absolute;
top:30px;
width:200px;
font:20px Tahoma,Helvetica,Arial,Simsun,sans-serif;
}
.text-magnifier .mag-explain {
border-top:1px solid #E6C99E;
color:#6C6C6C;
font-size:12px;
margin-top:5px;
width:190px;
}
.fn-hide{display:none}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script>
$(function(){
$("#k").focus(function(evt){
$(this).addClass("a");
if(this.value.length>0){
a(this);
d(this);
}
})
$("#k").keyup(function(evt){
if(this.value.length==0){
e();
}else{
a(this);
}
d(this);
})
$("#k").blur(function(evt){
$(this).removeClass("a");
e();
this.value=this.value
})
})
//計算div的left和top,顯示div
function a(evt){
var y = 20;
y = $(evt).outerHeight();
$("#textMag").removeClass("fn-hide");
var t = $(evt).offset().top;
var l = $(evt).offset().left;
$("#textMag").css({
"top": (t+y) + "px",
"left":l + "px"
});
}
//隱藏div
function e(){
$("#textMag").addClass("fn-hide")
}
//控制div裡顯示的數字
function d(e){
var i = e.value;
i=$.trim(i);
var h=i.substring(0,3);
i=i.substring(3);
while(i&&i.length>0){
h+=" "+i.substring(0,4);
i=i.substring(4)
}
$("#mag-text").html(h);
}
</script>
</head>
<body>
<div id="main">
手機號碼:<input type="text" id="k" maxlength="11" class="i-text" value="" /><div class="text-magnifier fn-hide" id="textMag" >
<div id="mag-text" class="mag-text"></div>
<div class="mag-explain">手機號碼是11位數字</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
相關文章
- oauth 實現手機號碼登入OAuth
- win10系統設定手機要求輸入10位手機號碼的解決方法Win10
- vivo 手機設定代理後,安裝 app 輸入密碼,提示無網路APP密碼
- TextField 輸入身份證號手機號銀行卡號格式化解決方案
- jquery 實現郵箱輸入自動提示功能jQuery
- 手機號碼定位
- 格式化手機號,銀行號jQuery外掛jQuery
- jQuery 顯示 input 輸入的密碼!jQuery密碼
- 密碼輸入強度提示例項程式碼密碼
- 密碼框輸入提示效果程式碼例項密碼
- input密碼輸入提示效果程式碼例項密碼
- vivo手機安裝應用自動輸入密碼密碼
- jQuery Label Better – 友好的表單輸入框提示外掛jQuery
- js驗證手機號碼JS
- 手機號碼繫結流程
- 實現輸入內容提示的功能(仿google_百度輸入框提示)jquery.ui.autocomplete.js外掛GojQueryUIJS
- 實現網頁中的搜尋輸入框效果 onfocuse onblur js 驗證手機號 座機區號網頁JS
- 共享資料夾帳號密碼正確,卻一直提示輸入帳號密碼的解決辦法密碼
- centos配置ssh免密碼登入後,仍提示輸入密碼CentOS密碼
- android 獲取手機號碼Android
- Jquery檢驗輸入值jQuery
- Ubuntu下鍵盤輸入錯亂問題,輸入雙引號輸出的是@符號,輸入#號輸出的是未知語言的字元...Ubuntu符號字元
- 手機號碼和電話號碼合法性驗證程式碼
- jQuery實現的輸入文字計數功能程式碼jQuery
- 手機號碼歸屬地介面大全
- Jquery 應用(清空輸入框)jQuery
- 相容所有瀏覽器的密碼框輸入提示效果瀏覽器密碼
- 實現文字框輸入內容提示程式碼例項
- ssh免認證配置後還是提示輸入密碼密碼
- 網易推出手機號碼郵箱:知道手機號即可發郵件
- jQuery模擬支付寶密碼輸入效果程式碼例項jQuery密碼
- Flutter 輸入車牌號,驗證碼鍵盤效果Flutter
- 判斷手機號碼是不是與平臺繫結的號碼
- 微信小程式使用者手機號登入微信小程式
- 驗證手機號碼格式的程式碼例項
- php 正則如何匹配手機號碼呢?PHP
- 教你excel如何保留11位手機號碼Excel
- jQuery如何用正規表示式驗證手機號、身份證號、中文名稱jQuery