يتطلب إدخال التاريخ والوقت وعنوان 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، قم أولاً بحماية معالجة لوحة المفاتيح الافتراضية للنظام
انسخ رمز الكود كما يلي:
// ختم المعالجة التقليدية
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);
ينهي!
الغرض الرئيسي هو استبدال رسائل لوحة مفاتيح النظام بمعالجتك الخاصة وحظر رسائل النظام، حتى تتمكن من الحصول على أقصى قدر من التحكم.
بهذه الطريقة، يتم إنشاء TEXTBOX الذي يقيد تنسيق التعبير العادي المحدد.
انسخ رمز الكود كما يلي:
// التحكم في تمثيل OBJ بناءً على التعبير العادي المحدد
قناع الوظيفة (objTextBox، قناع)
{
//قناع
expMask = new RegExp(mask);
// النص الموجود في مربع النص الحالي
var strText =objTextBox.value;
// طول النص
var nTextLen=strText. length;
// موضع المؤشر الحالي
var nCursorPos=getPos(objTextBox);
// الضغط على رمز المفتاح
var nKeyCode = window.event.keyCode;
إذا (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 هي اسم مربع النص المحدد. قناع المعلمة هو قناع بتنسيق التعبير العادي.
مثال:
لاستخدام مربع قناع التاريخ والوقت
انسخ رمز الكود كما يلي:
<اسم الإدخال=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
انسخ رمز الكود كما يلي:
<اسم الإدخال=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})$')>