اليوم ، أعطاني مدير المشروع وظيفة وطلب مني تنفيذ مثل هذه الوظيفة: ما أريد تحقيقه هو تضييق مربع نص رمز التحقق ، ثم إضافة صورة رمز التحقق إلى اليمين ، وفي حالة التخطيط المستجيب ، يمكن الاحتفاظ بصورة رمز التحقق على نفس السطر مثل مربع نص رمز التحقق عند الوصول إلى محطة الهاتف المحمول. كيف تفعل هذا؟ لقد كان من الصعب لفترة طويلة ، وبعد ذلك وجدت فكرة الإدراك. سيشارك المحرر أفكاري وعملية التنفيذ معك. إذا كان لديك أي أسئلة ، فيرجى طرحها والتعلم وتقدم التقدم معًا!
أفكار التنفيذ:
عروض التنفيذ
أضف رمز تخطيط شبكة Bootstrap إلى ذلك بنفسك للتحكم في التصميم تحت قرارات مختلفة.
الشرط الأساسي الوحيد لهذا التنفيذ هو أن ارتفاع صورة رمز التحقق الخاص بك يجب أن يكون هو نفس ارتفاع مربع الإدخال (ارتفاع مربع الإدخال حوالي 34 بكسل).
بعد ذلك ، سيكون الأمر بسيطًا. دع صورة رمز التحقق تتداخل في مربع الإدخال واستخدم التصميم المطلق لإكماله.
ملاحظة: تذكر إضافة قيمة حشو اليسار إلى مربع الإدخال (أكبر فقط من عرض رمز التحقق) ، وإلا فإنه سيمنع النص.
<style> #captcha {border-radius: 2px ؛ المؤشر: مؤشر ؛ الموضع: aboor ؛ z-index: 3 ؛ اليسار: 0 ؛ TOP: 0 ؛}#ValityEcode {padding-left: 110px ؛} <//style> <div> <siled for = "faleatecode"> id = "captcha" src = 'data: image/png ؛ base64 ، {{captcha :: doimg () [' imgcode ']}}'> <input type = "text" id = "validateCode"اسمحوا لي أن أري السائل الحل الخاص بي. هذا موقع إلكتروني أكتب عنه. يتماشى حجم الصورة مع ارتفاع مربع الإدخال. ليست هناك حاجة لتغيير عرض الإدخال. فقط اترك صورة رمز التحقق تغطي مربع الإدخال. ثم أضف قيمة حشو اليسار إلى الإدخال. يكون الحجم أكبر قليلاً من عرض صورة رمز التحقق. من غير المريح الإجابة على الأسئلة على هاتفك. سأشرح ذلك بالتفصيل عندما أعود.
ما سبق هو طريقة تنفيذ مربع النص في bootstrap الذي قدمته لك عن طريق تضييق عرض مربع النص وإضافة صورة رمز التحقق. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!