يتطلب إدخال التاريخ والوقت وعنوان IP وما إلى ذلك في صفحة الويب قيودًا معينة على التنسيق، وإلا سيكون من الصعب على البرنامج التواصل مع البرنامج.
كنت أعمل مؤخرًا على برنامج يحتاج إلى استخدام هذا الجانب، ووجدت برامج مقابلة على الإنترنت، لكن استخدامها كان مرهقًا للغاية، لذا اضطررت إلى تنفيذ أحد البرامج بنفسي.
قم أولاً بتنفيذ وظيفتين لتشغيل المؤشر:
// احصل على موضع المؤشر الحالي لوظيفة التحكم في مربع النص getPos(obj)
{
obj.focus();
varworkRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
WorkRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
WorkRange.collapse(false);
WorkRange.select();
عودة لين؛
}
// قم بتعيين موضع المؤشر الحالي لوظيفة التحكم في مربع النص setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
الفكرة الرئيسية لتنفيذ الوظيفة الرئيسية هي إجراء بعض العمليات عند الضغط على لوحة المفاتيح، وهو ما قمت بتصميمه في حدث OnKeyDown.
في OnKeyDown، قم أولاً بحماية معالجة لوحة المفاتيح الافتراضية للنظام
// أغلق نافذة المعالجة التقليدية.event.returnValue = false؛
ثم قم بمعالجة رسائل لوحة المفاتيح المقابلة التي تحتاج إلى معالجة.
ما عليك سوى معالجة بعض الأشياء الضرورية هنا، لأن مربع النص نفسه لا يتطلب الكثير من عمليات المستخدم، لذا حرك المؤشر للأمام، ثم حركه للخلف، واحذف العمليات، بحيث يكون لمربع النص الخاص بك وظائف أساسية الآن .
// مقبض زر التبديل (nKeyCode) بنفسك
{
الحالة 8: // إذا كان الإجراء مسافة للخلف [<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
استراحة؛
}
الحالة 46: // إذا كان الإجراء del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
استراحة؛
}
الحالة 38: // إذا كان الإجراء هو مفتاح الاتجاه [العلوي]
الحالة 39: // إذا كان الإجراء هو مفتاح السهم [يمين]
{
nCursorPos++;
استراحة؛
}
الحالة 37:// إذا كان الإجراء هو مفتاح السهم [يسار]
الحالة 40: // إذا كان الإجراء هو مفتاح الاتجاه [أسفل]
{
nCursorPos--;
استراحة؛
}
تقصير :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
إذا (nCursorPos>strText.length)
{
nCursorPos=strText. length;
}
استراحة؛
}
}
ستضيف أي رسالة أخرى حرفًا مرئيًا وغير مرئي وسيتحرك المؤشر للخلف. راجع قسم المعالجة الافتراضية أعلاه.
ثم حدد ما إذا كان القناع صحيحًا أم لا، وإذا كان صحيحًا، فسيكون الإدخال قانونيًا ويتم إضافة عرض القيمة إلى مربع النص.
إذا (strText.match(expMask))
{
// تنسيق الإدخال صحيح objTextBox.value = strText;
}
وأخيرا حرك المؤشر إلى المكان المناسب.
// حرك المؤشر setCursor(objTextBox,nCursorPos);
ينهي!
الغرض الرئيسي هو استبدال رسائل لوحة مفاتيح النظام بمعالجتك الخاصة وحظر رسائل النظام، حتى تتمكن من الحصول على أقصى قدر من التحكم.
بهذه الطريقة، يتم إنشاء TEXTBOX الذي يقيد تنسيق التعبير العادي المحدد.
مرفق هو الكود الكامل:
// وفقًا للتعبير العادي المحدد، يمكنك التحكم في قناع وظيفة تمثيل OBJ(objTextBox,mask)
{
//قناع expMask = new RegExp(mask);
// النص الموجود في مربع النص الحالي var strText =objTextBox.value;
// طول النص var nTextLen=strText.length;
//
موضع المؤشر الحالي var nCursorPos=getPos(objTextBox);
if (nKeyCode > 95) nKeyCode -= (95-47);
// ختم المعالجة التقليدية window.event.returnValue = false;
// مقبض زر التبديل (nKeyCode) بنفسك
{
الحالة 8: // إذا كان الإجراء مسافة للخلف [<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
استراحة؛
}
الحالة 46: // إذا كان الإجراء del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
استراحة؛
}
الحالة 38: // إذا كان الإجراء هو مفتاح الاتجاه [العلوي]
الحالة 39: // إذا كان الإجراء هو مفتاح السهم [يمين]
{
nCursorPos++;
استراحة؛
}
الحالة 37:// إذا كان الإجراء هو مفتاح السهم [يسار]
الحالة 40: // إذا كان الإجراء هو مفتاح الاتجاه [أسفل]
{
nCursorPos--;
استراحة؛
}
تقصير :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
إذا (nCursorPos>strText.length)
{
nCursorPos=strText. length;
}
استراحة؛
}
}
إذا (strText.match(expMask))
{
// تنسيق الإدخال صحيح objTextBox.value = strText;
}
// حرك المؤشر setCursor(objTextBox,nCursorPos);
}
// احصل على موضع المؤشر الحالي لوظيفة التحكم في مربع النص getPos(obj)
{
obj.focus();
varworkRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
WorkRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
WorkRange.collapse(false);
WorkRange.select();
عودة لين؛
}
// تعيين موضع المؤشر الحالي لوظيفة التحكم في مربع النص setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
الاستخدام:
1. قم بتعيين القيمة الأولية الافتراضية للتنسيق غير المحدد. على سبيل المثال: القيمة الأولية لتنسيق التاريخ والوقت هي "//::"، والتي تعني (السنة/الشهر/اليوم الساعة:الدقيقة:الثانية). عنوان IP هو "..." (192.168.0.1). في الواقع، ما عليك سوى تعيين حرف لا ينتهك التعبير العادي.
2. قم باستدعاء وظيفة القناع في حدث 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})$')">