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 では、まずシステムのデフォルトのキーボード処理をシールドし
、 // 従来の処理をシールして
から、処理する必要がある対応するキーボード メッセージを処理します。
ここでは、必要な処理をいくつか行うだけで、テキスト ボックス自体はそれほど多くのユーザー操作を必要としないため、カーソルを前に移動したり、後ろに移動したり、削除したりすることで、テキスト ボックスの基本的な機能が非常にスムーズになります。 。
// ボタンスイッチ(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 表現関数を制御します 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;
// ボタンスイッチ(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)
;
}
使用法:
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})$')">