Emad Saif نشر 7 سبتمبر 2022 أرسل تقرير مشاركة نشر 7 سبتمبر 2022 لدي عنصر input من نوع File لرفع بالشكل التالي: <input type="file" id="my-input" /> إذا قام المستخدم بالضغط على هذا الزر وقام بإختيار ملف ما، أريد أن أقوم بعمل زر Clear، وعندما يقوم المستخدم بالضغط عليه يتم إزالة الملف الذي إختارها المستخدم. كيف يتم عمل reset لعنصر input من خلال جافاسكريبت JavaScript؟ 3 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Adnane Kadri نشر 7 سبتمبر 2022 أرسل تقرير مشاركة نشر 7 سبتمبر 2022 يوجد بالفعل زر من نوع reset يقوم بإعادة القيم المسندة لحقول الادخال في استمارة ما لقيمتها الافتراضية. يمكنك الاستعانة به مباشرة: <form> <input type="file" name="file"> <button type="reset"> reset </button> </form> اما ان تطلب الامر فعل ذلك برمجيا، يمكنك مباشرة تجاوز قيمة value الخاصة بهذا الحقل وفقط. <form> <input type="file" name="file" id="file"> <button type="button" id="reset" onclick="file.value = ''"> reset </button> </form> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Wael Aljamal نشر 7 سبتمبر 2022 أرسل تقرير مشاركة نشر 7 سبتمبر 2022 يمكن استهداف العنصر من خال استعلام DOM ثم إسناد قيمة فارغة له document.getElementById('my-input').value = '' يمكنك استعمال السطر السابق في أي دالة، أو كدالة حدث نقر على زر مخصص إفراغ الحقل من قيمته <button onclick="document.getElementById('my-input').value = ''"> حذف المدخلات </button> لاتحتاج هذه الطريقة وجود عنصر Form اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 علي عبد محسن نشر 8 سبتمبر 2022 أرسل تقرير مشاركة نشر 8 سبتمبر 2022 تستطيع عمل ذلك بأكثر من طريقة من خلال javascript. في المثال التالي سنقوم بعمل صندوق إدخال input من نوع file لإلتقاط الملفات مع button يقوم بعمل reset لصندوق الإدخال في كل مرة يتم نقره. ليس هذا فحسب ولكن سنعطيك فكرة عما يسمى ب UX تجربة المستخدم. مثلا نريد أن يكون زر إعادة الضبط فعالاً فقط عندما يكون هنالك ملفاً تم إختياره من قبل المستخدم وكما في المثال التالي. <!DOCTYPE HTML> <html> <body> <input id="pickup" type="file" /> <!-- نعرف صندوق الإدخال بمعرف ونوع ملف --> <button id="clear" disabled >Clear</button> <!-- نعرف الزرالذي نستعمله لإعادة ضبط صندوق الإدخال بمعرف ونضعه في حالة خاملة لأننا في بداية عرض الصفحة لم نكن قد إخترنا أي ملف بعد--> <script> var pickup=document.getElementById("pickup") // نضع صندوق الإدخال في متغير بالوصول إليه عن طريق جافاسكربت var clear=document.getElementById("clear") // نضع زر إعادة الضبط في متغير بنفس الطريقة أعلاه بالوصول إليه بدلالة المعرف pickup.addEventListener("change", function(e){ // نشغل دالة التنصت لتعمل على صندوق ألإدخال في كل مرة تتغير فيه قيمته if(e.target.value !=="") { // هدفنا هنا في كل مرة نكون قد اخترنا ملفاً نجعل حالة زر إعادة الضبط فعالاً بحيث نستطيع الضغط عليه clear.disabled=false } }) clear.addEventListener("click", function(){ // نشغل دالة التنصت على رز إعادة الضبط في كل مرة يتم نقره // هدفنا عند نقر الزر يتم تفريغ صندوق الإدخال ومن ثم تغيير حالة الزر الى الخمول pickup.value="" clear.disabled=true }) </script> </body> </html> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Emad Saif
لدي عنصر input من نوع File لرفع بالشكل التالي:
إذا قام المستخدم بالضغط على هذا الزر وقام بإختيار ملف ما، أريد أن أقوم بعمل زر Clear، وعندما يقوم المستخدم بالضغط عليه يتم إزالة الملف الذي إختارها المستخدم.
كيف يتم عمل reset لعنصر input من خلال جافاسكريبت JavaScript؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.