javascript events

Ahmed Ebrahim11 · 5 يناير

السلام عليكم

اسف لكثره اسئلتي

كنت احاول ان اقوم باستخدام focus و blur لمجموعه input اي عندما يمتلئ اول حقل برقم يتم الغاء ال focus تلقائيا ,وينتقل للحقل الثاني مباشره

ولمن لم تعمل هذا هو الكود

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" class="one">
        <input type="text" class="two">
        <button id="click" type="submit"> submit</button>
    </form>
    <a href="https://www.google.com/search?q=google&rlz=1C1GCEA_enEG1081EG1081&oq=google&gs_lcrp=EgZjaHJvbWUqDAgAECMYJxiABBiKBTIMCAAQIxgnGIAEGIoFMhMIARAuGIMBGMcBGLEDGNEDGIAEMgwIAhAjGCcYgAQYigUyCggDEAAYsQMYgAQyDQgEEAAYgwEYsQMYgAQyBggFEEUYPDIGCAYQRRg8MgYIBxBFGDzSAQgxNTM3ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8">GOOGLE</a>
    <script src="./train.js"></script>
</body>
</html>

let one = document.querySelector(".one")
let two = document.querySelector(".two")
window.onload = function(){
    one.focus();
}
if (one.value !== "" && one.value.length === 1){
    console.log("hello");
    one.blur();
    two.focus();
}

تم التعديل في 5 يناير بواسطة Ahmed Ebrahim11

عبدالباسط ابراهيم · 6 يناير

الكود صحيح ولكن تحتاج لتنفيذ الكود الخاص بال if عند الكتابة أو الحدث input

لذلك سنضيف الحدث input ليصبح الكود مشابه للكود التالي

<script>
  let one = document.querySelector(".one")
  let two = document.querySelector(".two")

  one.addEventListener('input', function() {
    if (one.value !== "" && one.value.length === 1) {
      console.log("hello");
      one.blur();
      two.focus();
    }
  });

  window.onload = function(){
    one.focus();
  }
</script>