اظهار ال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

رابط هذا التعليق

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

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

رابط هذا التعليق

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

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

رابط هذا التعليق

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية