هيلبرنت | Helpernt - [ شرح ] طريقة إظهار وإخفاء كلمة السر

السلام عليكم ورحمة الله وبركاته
اليوم حاجه بسيطه جدا وسهله ازاي اخلي كلمة السر تكون ظاهره وارجعه مخفيه تاني من غير ما العب في اكواد ال html
احنا انستخدم js (اجافا اسكربت)

https://i.imgur.com/VLTGb59.gif

كود PHP:


		
			
<div class="form-group">

                                <div class="col-sm-3 col-sm-offset-0" >

                                    <p onclick="myFunction()"><i class="fa fa-eye fa-lg"></i></p>

                                </div>

                                <div class="col-sm-7 col-sm-offset-0">

                             <input class="form-control" type="password" id="myInput" name="password" autocomplete="off" value="Mohamed yasser">



                                </div>

                                <label class="col-sm-2 control-label">كلمة المرور</label>

                            </div>

                            <script>

                            function myFunction() {

                              var x = document.getElementById("myInput");

                              if (x.type === "password") {

                                x.type = "text";

                              } else {

                                x.type = "password";

                              }

                            }

                            </script>

بص بقا الكود الي معايا ده
اول حاجه انمسك الجافا اسكربت
شايفين الكود ده

كود PHP:


		
			
<script>

                            function myFunction() {

                              var x = document.getElementById("myInput");

                              if (x.type === "password") {

                                x.type = "text";

                              } else {

                                x.type = "password";

                              }

                            }

                            </script>

اول سطر في اكللمه ده myFunction ده الي انحطه في الزر الي اول ماندوس عليه كلمه السر تظهر ولما ندوس عليه تاني كملة السر تختفي
تاني سطر

كود PHP:


		
			
                              var x = document.getElementById("myInput");

شايفين كلمة myInput ده اناخده وانحطه في ipput الي فيه كلمة السر
طبعا والباقي بيقولك انه ايحول input ال text الي password ببساطه كده لناس الي ملهاش خبره text ياعني كلمة السر مكشوفه password ياعني كلمه السر بتكون علي شكل نجوم او دوائر اكيد الكل عارفه علشان مقعدش اوصفهemoji29

https://i.imgur.com/1X8uW0a.jpg

كده خلصنا من الجافا نيجي لاكواد html
الكود ده

كود PHP:


		
			
<p onclick="myFunction()"><i class="fa fa-eye fa-lg"></i></p>

شايف كلمة

كود PHP:


		
			
onclick="myFunction()"

onclick ده خلت ال p كانه زر مثل ال <a> او button اول ماتدوس عليه يعمل شغل طيب ايه الشغل الي ايعمله وزاي طيب
ال myFunction() ده اول سطر من اكواد الجافا الي قولتلكم عليه فوق ياعني اول ما ادوس الزر ينفذ امر الجافا الي فيه كلمه myFunction ممكن تغير الاسم براحتك بس لازم تغير في الجافا وفي الاكواد

السطر ده

كود PHP:


		
			
                             <input class="form-control" type="password" id="myInput" name="password" autocomplete="off" value="Mohamed yasser">

شايفين

كود PHP:


		
			
type="password"

ده كده اي كلام اتكتبه في ال input ايكون علي شكل نجوم لو غيرته ل text ايكون ظاهر
الي يهمنا في السطر ده كله كلمة

كود PHP:


		
			
id="myInput"

هنا الامر الي قولتكم عليه فوق تحط الاسم في id
وكده الكود تم شرحه بالكامل اول ماتفتح الاتصال بالموقع اتكتب ايكون بارقام تدوس علي العين كلمة السر تظهر