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

Hanane Ait El Houssaine · 20 مارس 2021

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

عبد الله محمد5 · 20 مارس 2021

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

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

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

الinput:

<input type="text" id="2" onclick="showInput('anyID1')">

الدالة التي سيتم استدعاؤها لتظهر الinput :

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

محمد أيت لعرايك · 20 مارس 2021

يمكن عمل ذلك بطريقة سهلة بواسطة 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) 
    
  // عند الضغط على الحقل تقوم الدالة المبينة أعلاه باضافة حقل جديد
  // وتقوم بوضع حدث جديد لترقب نقرة جديد

});

عبدالباسط ابراهيم · 20 مارس 2021

بالإضافة للطريقة بالأعلى حيث تم استخدام ال 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 فقط بدون التدخل من الجافاسكربت

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

السؤال

Hanane Ait El Houssaine

3 أجوبة على هذا السؤال

Recommended Posts

عبد الله محمد5

محمد أيت لعرايك

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية