Web ページに日付、時刻、IP アドレスなどを入力するには、特定の形式の制限が必要です。そうしないと、プログラムとの通信が困難になります。最近、この側面を使用する必要があるプログラムを作成しました。インターネット上にありますが、使用するとどれも非常に悪い音になるため、自分で実装する必要がありました。
まず、カーソルを操作するための 2 つの関数を実装します。
次のようにコードをコピーします。
// テキスト ボックス コントロールの現在のカーソル位置を取得します
関数 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();
len を返します。
}
// テキスト ボックス コントロールの現在のカーソル位置を設定します
関数 setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
main 関数実装の主なアイデアは、キーボードが押されたときにいくつかの操作を実行することであり、これは onKeyDown イベントで設計しました。
onKeyDown では、まずシステムのデフォルトのキーボード処理をシールドします。
次のようにコードをコピーします。
// 従来の処理をシールします
window.event.returnvalue = false;
次に、処理する必要がある対応するキーボード メッセージを処理します。
ここでは、必要な処理をいくつか行うだけで、テキスト ボックス自体はそれほど多くのユーザー操作を必要としないため、カーソルを前に移動したり、後ろに移動したり、削除したりすることで、テキスト ボックスの基本的な機能が非常にスムーズになります。 。
次のようにコードをコピーします。
// ボタンを自分で処理します
スイッチ(nKeyCode)
{
case 8:// アクションがバックスペース [<-] の場合
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
壊す;
}
case 46:// アクションが del[del] の場合
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
壊す;
}
case 38:// アクションが方向キー[上]の場合
case 39:// アクションが矢印キー[右]の場合
{
nCursorPos++;
壊す;
}
case 37:// アクションが矢印キー [左] の場合
case 40:// アクションが方向キーの場合 [下]
{
nCursorPos--;
壊す;
}
デフォルト ：
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
壊す;
}
}
その他のメッセージでは文字が追加され、表示される文字と非表示の文字が追加され、カーソルが戻ります。上記のデフォルトの処理セクションを参照してください。
次に、マスクが正しいかどうかを判断します。正しい場合、入力は正当であり、値の表示がテキスト ボックスに追加されます。
次のようにコードをコピーします。
if (strText.match(expMask))
{
//入力形式は正しいです
objTextBox.value = strText;
}
最後に、カーソルを適切な位置に移動します。
// カーソルを移動する
setCursor(objTextBox,nCursorPos);
仕上げる！
主な目的は、システムのキーボード メッセージを独自の処理に置き換え、システムのメッセージをブロックして、最大限の制御を得ることができるようにすることです。
このようにして、指定した正規表現の形式を制限したTEXTBOXが誕生します。
次のようにコードをコピーします。
//指定された正規表現に基づいて OBJ 表現を制御します
関数マスク(objTextBox,mask)
{
//マスク
expMask = 新しい RegExp(マスク);
// 現在のテキストボックス内のテキスト
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;
// ボタンを自分で処理します
スイッチ(nKeyCode)
{
case 8:// アクションがバックスペース [<-] の場合
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
壊す;
}
case 46:// アクションが del[del] の場合
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
壊す;
}
case 38:// アクションが方向キー[上]の場合
case 39:// アクションが矢印キー[右]の場合
{
nCursorPos++;
壊す;
}
case 37:// アクションが矢印キー [左] の場合
case 40:// アクションが方向キーの場合 [下]
{
nCursorPos--;
壊す;
}
デフォルト ：
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
壊す;
}
}
if (strText.match(expMask))
{
//入力形式は正しいです
objTextBox.value = strText;
}
// カーソルを移動する
setCursor(objTextBox,nCursorPos);
}
// テキスト ボックス コントロールの現在のカーソル位置を取得します
関数 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();
len を返します。
}
// テキスト ボックス コントロールの現在のカーソル位置を設定します
関数 setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
使用方法:
1. デフォルトの不定形式の初期値を設定します。例: 日付と時刻の形式の初期値は // :: で、これは (年/月/日 時:分:秒) を意味します。 IP は... (192.168.0.1) です。実際には、正規表現に違反しない文字を設定するだけです。
2. フォームの TEXT ボックスの onKeyDown イベントでマスク関数を呼び出します。パラメータ objTextBox は、指定されたテキスト ボックスの名前です。パラメータマスクは正規表現形式のマスクです。
例：
日時マスクボックスを使用するには
次のようにコードをコピーします。
<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})$')>