jQuery文字框輸入數字彈出格式化層
現在很多網站為了更加人性化,在很多細節進行了完善。
比較常用的一個效果是在文字框輸入數字的時候,能夠彈出一個層,並且實時顯示大號字型。
數字且能夠以三位分割進行顯示。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <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 src="http://libs.baidu.com/jquery/1.9.0/jquery.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(); }) }) //計算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> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$("#k").focus(function(evt){}),為文字框註冊focus事件處理函式。
(3).$(this).addClass("a"),為文字框新增名稱為a的樣式類。
(4).if(this.value.length>0){
a(this);
d(this);
},如果文字框的內容長度大於0,那麼就執行下面兩個函式,後面會有介紹。
(5).$("#k").keyup(function(evt){}),為文字框註冊keyup事件處理函式。
(6).if(this.value.length==0){
e();
}else{
a(this);
}
d(this);
進行判斷,然後呼叫相應的函式,相關函式的作用後面會有介紹。
(7).$("#k").blur(function(evt){
$(this).removeClass("a");
e();
}),為文字框註冊blur事件處理函式。
$(this).removeClass("a"),移除樣式類a。
(8).function a(evt){},此函式可以設定塊的顯示,引數是一個元素物件。
(9).var y = 20,宣告一個變數並賦初值為20,貌似不用賦值,可能初衷是為了設定一個預設值。
(10).y = $(evt).outerHeight(),在本程式碼中就是獲取文字框的高度。
(11).$("#textMag").removeClass("fn-hide"),移除名稱為fn-hide的class類。
(12).var t = $(evt).offset().top,獲取文字框相對於document頂部的偏移量。
(13).var l = $(evt).offset().left,獲取文字框相對於document左側的偏移量。
(14).$("#textMag").css({ "top": (t+y) + "px",
"left":l + "px"
}),設定提示層的位置,通過前面計算出來的值,可以實現提示層能夠和文字框左對齊,並且垂直緊貼。
(15).function e(){
$("#textMag").addClass("fn-hide")
},設定提示層隱藏。
(16).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);
},把數字進行三位一分隔效果。
二.相關閱讀:
(1).focus事件參閱jQuery focus 事件一章節。
(2).addClass()參閱jQuery addClass()一章節。
(3).keyup事件參閱jQuery keyup 事件一章節。
(4).blur事件參閱jQuery blur 事件一章節。
(5).removeClass()參閱jQuery removeClass()一章節。
(6).outerHeight()參閱jQuery outerHeight()一章節。
(7).offset()參閱jQuery offset()一章節。
相關文章
- JavaScript 文字框只能輸入數字JavaScript
- 文字框只能輸入數字 javascriptJavaScript
- 文字框限制輸入字數的JSJS
- 文字框只能輸入數字程式碼
- jquery實現的規定文字框只能輸入數字可以包括小數jQuery
- 規定文字框只能夠輸入數字包括小數的jQuery程式碼jQuery
- jQuery文字框輸入內容同步jQuery
- Qt 實現文字輸入框,帶字數限制QT
- javascript實時顯示文字框輸入字數JavaScript
- 在文字框輸入關鍵字會彈出內容提示程式碼例項
- jQuery文字框內容輸入同步功能jQuery
- 限定文字框只能輸入數字例項程式碼
- js實現的文字框只能夠輸入數字JS
- 文字框輸入數字倒計例項程式碼
- 限制文字框只能輸入數字:Asp.net&C#ASP.NETC#
- asp.net input文字框只能輸入數字jsASP.NETJS
- input 輸入框只能輸入數字
- 動態顯示:文字框字數(輸入還剩多少字)
- jquery連線html頁面做一個彈出框輸入jQueryHTML
- jquery實現的限制文字框只能輸入非負實數jQuery
- jQuery限制文字框輸入長度詳解jQuery
- javascript驗證輸入文字框內容是否為數字JavaScript
- JavaScript 驗證輸入文字框內容是否為數字JavaScript
- js規定文字框只能夠輸入字母和數字JS
- 限制文字框只能夠輸入數字程式碼例項
- jQuery實現的規定文字框中只能輸入正整數jQuery
- C#數字格式化輸出C#
- jquery實現的限制文字框只能夠輸入大於0整數jQuery
- 如何設定文字框只能夠輸入數字程式碼例項
- jQuery實現的文字輸入字數倒計效果程式碼jQuery
- Java™ 教程(格式化數字列印輸出)Java
- input只能輸入文字框
- 輸入框只能輸入負數,整數,2位小數(鍵盤彈起事件)事件
- 【新特性速遞】數字輸入框的字首和字尾(位於輸入框內部)
- js實現的檢測文字框輸入是否是數字的程式碼JS
- jQuery拖拽的彈出層效果jQuery
- 使用jquery製作彈出框效果jQuery
- 文字框輸入文字倒計詳解