1. 程式人生 > >[原創]用JavaScript在網頁中實現掩碼文字框

[原創]用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就誕生了。

    附完整程式碼:


                // 根據指定正表示式,來控制OBJ表示
                function mask(objTextBox,mask)
                {
                        // 掩碼
                        expMask = new RegExp(mask);

                        // 當前文字框中的文字
                        var strText =objTextBox.value;
                        // 文字長度
                        var nTextLen=strText.length;

                        // 當前游標位置
                        var nCursorPos=getPos(objTextBox);

                        // 按下的鍵碼
                        var nKeyCode = window.event.keyCode;
                        if (nKeyCode > 95) nKeyCode -= (95-47);

                        // 封住傳統處理
                        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;
                                }

                        }

                        if (strText.match(expMask))
                        {
                                // 輸入格式正確
                                objTextBox.value = strText;
                        }

                        // 移動游標
                        setCursor(objTextBox,nCursorPos);
                }

                // 得到一個文字框控制元件的當前游標位置
                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();
                }



使用方法:
                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