في الواقع ، في الواقع ، لا يمكن عرض كلمة المرور في التنفيذ ، لكن لدينا مثل هذا الشرط في عملنا. عندما لا ندخل شيئًا ما ، هناك مطالبة بإدخال كلمة المرور في المربع ، ولكن عندما ندخل شيئًا ما ، يتم عرض الرقم *. فكيف يتم تنفيذها؟ في الواقع ، فإن المبدأ بسيط للغاية ، وهو وضع مربعين نصين ، والأناقة وتحديد المواقع هي نفسها. قم أولاً بإخفاء النوع على أنه كلمة مرور ، وعرض فقط مربع كلمة المرور الزائفة مع النوع كنص. اضبط موجه القيمة للمطالبات ، مثل كلمة مرور الإدخال. ثم عندما يتم تشغيل الإدخال ، يتم إخفاء إدخال نص النوع ، بحيث يتم عرض إدخال كلمة المرور. ثم عندما يتم اكتشاف قيمة كلمة المرور لتكون فارغة ، فإن النوع هو مخفي كلمة المرور والنوع هو عرض النص. لن أقول أي شيء ، سأضيف الرمز. (PS: وظيفة إعادة تعيين إضافية)
أولاً أدخل جزء HTML
<bools> <tr> <td> حساب </td> <td> <type type = "text" value = "الرجاء إدخال حسابك"/> </td> </td> <tr> <td> كلمة المرور </td> لا شيء "/> </td> </tr> <tr> <td> <type type =" button "value =" login "/> <input type =" button "value =" reset "id =" btn_res "/> </td> </tr> </table>
ثم انتقل إلى جزء JS
// part part $ (function () {$ (". admin"). focus (function () {if ($ (this) .val () == "الرجاء إدخال حسابك") {$ (this) .val ( الحساب ") ؛}}) ؛ // جزء كلمة المرور $ ('#login_showpwd'). Focus (function () {var text_value = $ (this) .val () ؛ if (text_value == this.defaultValue) {$ ('#login_showpwd'). Hide () ؛ $ ('#login_password'). show () $ (this) .val () ؛ if (text_value == "") {$ ('#login_showpwd'). show () ؛ $ ('#login_password'). Hide () ؛}}) ؛ // إعادة تعيين الجزء $ ('#btn_res') الحساب ") ؛ $ ('#login_password'). Hide (). val (" ") ؛ $ ("#login_showpwd "). show () ؛}) ؛}) ؛أدناه سأقدم طريقة النص المعروضة ضمن مربع إدخال كلمة المرور
والمطالبة الصغيرة هي أن العديد من مواقع الويب لها كلمتين في مربع إدخال كلمة المرور. اعتدت أن أعتقد أنه كان نصًا ، لكنني اكتشفت اليوم فقط أنها علامة كلمة مرور. طريقة الكتابة كما يلي
<type type = "password" name = "pas" placeholder = "password"/>
فقط أضف سمة العنصر النائب
ما ورد أعلاه هو المعرفة ذات الصلة حول رمز وظيفة موجه النص المعروض في مربع كلمة المرور (كلمة المرور) المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!