โดยปกติแล้ว input password เราจะไม่ทราบเรากรอกข้อมูลรหัสผ่านถูกตามที่เราต้องการหรือไม่ ส่วนใหญ่จะใช้วิธีแก้ปํยญหา
โดยให้กรอกรหัสผ่านซ้ำอีกครั้งในอีกช่องรายการ แล้วตรวจสอบสอบ เพื่อยืนยันว่าผู้ใช้กรอกรหัสผ่านถูกตามที่ต้องการ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="password" name="obj1" class="pass_swap">
<input type="text" name="obj2" class="pass_swap" hidden>
<button type="button" id="togglePass">Show</button>
<script>
$(function(){
$("#togglePass").on("click",function(){
var condCheck = $(this).text();
$(this).text((condCheck=='Show')?'Hide':'Show');
$(".pass_swap").toggle();
});
$(".pass_swap").on("change",function(){
$(".pass_swap").val($(this).val());
});
});
</script>
</body>
</html>
ตัวอย่างผลลัพธ์
สามารถนำไปประยุกต์ เพิ่มเติมตามต้องการได้
