• 0

اظهار الinputs المخفية

اريد عند الضغط على input ان يظهر input اخر وعند الضغط على input الذي ظهر يظهر input اخر ايضا وهكدا ...

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك القيام بهذا من خلال جعل الinput الذي تودين أن يظهر مخفياً كالاتي:

<input type="text" id="anyID1" hidden>

والinput المسؤول عن إظهاره يكون عنده حدث يتم تنفيذه في حالة الضغط عليه ليستعدي دالة تظهر الinput الاول من خلال إرسال الID لها :

  1. الinput:
    <input type="text" id="2" onclick="showInput('anyID1')">
  2. الدالة التي سيتم استدعاؤها لتظهر الinput :

    function showInput(id){
    document.getElementById(id).style.display = "block";
    }

     

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكن عمل ذلك بطريقة سهلة بواسطة jquery على الشكل التالي:

$(document).ready(function(){

    var addInput = function(){
        // بناء حقل جديد
        var input = $('<input type="text" class="form-control">');
        // إضافة الحقل عند النقر على الحقل الأول
        input.insertAfter(this);
        // تفعيل الحدث وإنتظار نقرة جديدة
        input.on('click',addInput)
    }
    
    
    $('input').on('click',addInput) 
    
  // عند الضغط على الحقل تقوم الدالة المبينة أعلاه باضافة حقل جديد
  // وتقوم بوضع حدث جديد لترقب نقرة جديد

});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

بالإضافة للطريقة بالأعلى حيث تم استخدام ال javascript يمكنك عمل ذلك باستخدامcss فقط من خلال ال input:focus كالتالي

<style>
  #id2{
  	display: none;// مخفي input  هذا ال
  }
  #id1:focus #id2{
  	display: block; //id2 سيظهر ال  input عند الضغط على هذا ال
  }
</style>


<body>
<input id="id1"/>
<input id="id2"/>
</body>

يمكنك عمل ما تريد بال css  فقط بدون التدخل من الجافاسكربت

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن