[原創]用JavaScript在網頁中實現掩碼文字框
在網頁中輸日期、時間、IP地址等需要一定的格式限制,否則將會程式將會很難和程式溝痛。
最近在做一個程式正好需要用到此方面,在網上找到過相應的程式,但用起來都非常惡,於是乎只好自己實現一個了。
首先實現兩個函式用來操作游標:
// 得到一個文字框控制元件的當前游標位置
function getPos(obj)
{
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
return len;
}
// 設定一個文字框控制元件的當前游標位置
function setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
主要函式實現的主要思想是當鍵盤按下時進行一些操作,我設計在OnKeyDown事件中。
在OnKeyDown中,首先將系統預設的鍵盤處理遮蔽掉
// 封住傳統處理
window.event.returnValue = false;
然後處理相應需要處理的鍵盤訊息。
這裡隨便處理幾個必要的就可以了,因為文字框本身也不需要什麼太多的使用者操作,所以把游標的前移、後移、刪除操作進行處理,這樣你的文字框就有了基本的操作,現在操作起來已經很順手了。
// 自行處理按鈕
switch (nKeyCode)
{
case 8:// 如果動作是退格[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
break;
}
case 46:// 如果動作是del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
break;
}
case 38:// 如果動作是方向鍵[上]
case 39:// 如果動作是方向鍵[右]
{
nCursorPos++;
break;
}
case 37:// 如果動作是方向鍵[左]
case 40:// 如果動作是方向鍵[下]
{
nCursorPos--;
break;
}
default :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
break;
}
}
其它的任何訊息都當新增一個字元,可見不可見的字元,都將新增並游標往後走一下。見上方的default 處理部份。
然後判斷掩碼是否正確,如果正確,那麼此次輸入合法,將值顯示新增到文字框中。
if (strText.match(expMask))
{
// 輸入格式正確
objTextBox.value = strText;
}
最後將游標移到適當的位置。
// 移動游標
setCursor(objTextBox,nCursorPos);
完成!
其主要就是把系統的鍵盤訊息替換成自己的處理,遮蔽掉系統的,這樣就可以獲得最大的操控。
如此就完成了一個對指定的正則表示式進行格式限制的TEXTBOX就誕生了。
附完整程式碼:
// 當前文字框中的文字 // 當前游標位置 // 按下的鍵碼 // 封住傳統處理 nCursorPos++; } if (strText.match(expMask)) // 移動游標 // 得到一個文字框控制元件的當前游標位置 return len; // 設定一個文字框控制元件的當前游標位置 range.select(); |
使用方法:
1.設定預設的、不定的格式初值。如:日期時間的格式初值為“// ::”,表示(年/月/日 時:分:秒)。IP的為“...”(192.168.0.1)。其實就是設定一個不會違反正則表示式的字元就可以。
2.在表單的TEXT框的OnKeyDown事件中呼叫mask函式,引數objTextBox是指定的文字框的name。引數mask是正則表示式格式的掩碼。
例子:
要使用日期時間型的掩碼框
<input name="i_etmend" type="text" id="i_etmend" value="{I_ETMEND}" maxlength="19" onkeydown="mask(i_etmend, '^(([0-9]{0,4})/-([0-9]{0,2})/-([0-9]{0,2}) ([0-9]{0,2}):([0-9]{0,2}):([0-9]{0,2}))$')">
要使用IP掩碼框
<input name="i_bip" type="text" id="i_bip" value="{I_BIP}" maxlength="15" onkeydown="mask(i_bip, '^([0-9]{0,3}[/.][0-9]{0,3}[/.][0-9]{0,3}[/.][0-9]{0,3})$')">
相關推薦
[原創]用JavaScript在網頁中實現掩碼文字框
在網頁中輸日期、時間、IP地址等需要一定的格式限制,否則將會程式將會很難和程式溝痛。 最近在做一個程式正好需要用到此方面,在網上找到過相應的程式,但用起來都非常惡,於是乎只好自己實現一個了。 首先實現兩個函式用來操作游標: // 得到一個文字
《在網頁中實現手機驗證碼登陸程式碼》
JavaScript程式碼如下: // 0 入口函式 $(function(){ // 1、點選獲取驗證碼,請求介面,發給使用者驗證碼 $('#getNum').on('click',function(){ // 2、獲取使用者的手機號 var phoneNu
Quick-Cocos2d3.2RC1在Code IDE中實現代碼提示
ref 使用 分享 tin doc tails 位置 壓縮包 http 之前寫Lua最痛苦的就是代碼提示問題,如今官方給了IDE很好用。以下說Quick使用IDE加入代碼提示問題。 第一步:制作api提示壓縮包。須要使用控制臺實現方法例如以下: 1、找到framew
網頁中實現倒計時程序
col innerhtml ava doc 圖片 com info ima inf 先看效果 <script language="JavaScript"> var t = 3;//設定跳轉的時間 setInterval("refer()", 10
用JAVA和Jquery實現掃碼登入的原理和程式碼
貼上前端程式碼,供參考 <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jq
在servlet中實現驗證碼的功能
1:使用的工具 myeclipse2015 jdk1.8 tomcat8.0 2:目錄結構 3:原始碼 index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
Django中實現驗證碼功能
安裝Pillow pip install Pillow==3.4.1 windows下如果安裝報錯: 點選此處 下載對應的版本到本地,下載到那裡,就去那個目錄下: pip install Pi
BS網頁中實現一個進度條progressBar
早上看到了Eclipse的幫助頁面 有一個不錯的進度條,所以很感興趣.右鍵看了一下,原來就是用了個div的樣式,然後非同步請求進度處理資訊.把處理的進度資訊實時反應到頁面上. 原理明白了.程式碼很簡單.2個頁面.一個負責顯示,一個是非同步處理頁面. 1.progressBar
網頁中實現複製功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
在網頁中實現文字的一個一個出現
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
在網頁中實現細線邊框的兩種方法
很多朋友都有過製作網頁的經歷,如今,眾多網頁的設計都用到了表格。這樣不僅有利於網頁的維護,同時,提高了網頁的觀賞性。在眾多網頁製作風格中,細邊框這個製作方法是必不可少的。這裡,我將簡單地談一下細邊框的製作方法。 談到細邊框,本人認為大致有兩種製作方法,第一種是用表格
網頁中實現"分享至微博、QQ空間等"程式碼
很多網站中的部落格、視訊、文章、等都可以實現分享至QQ空間、微博、QQ好友或者其它網站,如何實現呢? 複製並貼上下面的JS程式碼,放到您的網頁,可以在<body>和</body&
SDRAM中資料掩碼DQM的作用
DQM就是掩碼控制位.在sdram中,每個DQM控制8bit Data在讀操作的時候沒什麼大的影響,比如你讀32位的sdram module, 但你只要其中低8bit的資料,沒有關係,只要讀出32bit資料,再在軟體裡將高24位bit和0"與"就可以了,有沒有DQM關係不大
在asp.net網頁中實現tabPage功能(上)
我是個.net新手,所以我寫的東西在好些高手們看來似乎比較粗淺,還請大家海涵!並希望大家多多指導、多提意見,我會十分感激的,謝謝! 前幾天在做一個專案時,專案經理非要讓我在asp.net網頁中實現類似Windows Form程式中類似TabControl(TabPag
JavaScript網頁中動態顯示時間
本人網站:http://www.omegaxyz.com/ 本文著重介紹一下如何在網頁中使用JavaScript新增動態時間方法 Date物件的方法 Date 物件能夠使你獲得相對於國際標準時間(格林威治標準時間,現在被稱為 UTC-Universal C
C++中模板與用C語言中實現模板
1、模板的概念 我們已經學過過載(Overloading),對過載函式而言,C++的檢查機制能通過函式引數的不同及所屬類的不同。正確的呼叫過載函式。例如,為求兩個數的最大值,我們定義MAX()函式需要對不同的資料型別分別定義不同過載(Overload)版本。 //函式
網頁中實現分頁功能的幾種方法
當我們在做一些類似於貼吧展示帖子這種專案的時候,由於帖子的數量比較多,就會用到分頁的技術。這裡我將介紹幾種幾種方式來實現分頁的技術。首先我們先來了解一下分頁功能的核心技術點:1. 首先先規定每一頁顯示多少張貼子數,這樣才能計算總共有多少頁。2. 然後再
PhpStorm中實現代碼自動換行
file general 頁面 分享 顯示 tin info src phpstorm 方法一: 隨便打開一個頁面,在顯示行號(最左邊)這裏鼠標右擊,勾選"Use Soft Wraps"。 方法二: 選擇"File-->>Settings-
vue中實現上下滑動文字通告的功能
<template> <div class="marquee"> <div class="marquee_title"> <span>免費微報</span>
textview中點選效果實現,比如點選textview中實現圖片和文字的顏色變化(類似於button)
<TextView android:drawableTop="@drawable/bg_text_view" android:id="@+id/home_toolbar_settings" an