Emad Saif نشر 7 سبتمبر 2022 أرسل تقرير نشر 7 سبتمبر 2022 لدي عنصر input من نوع File لرفع بالشكل التالي: <input type="file" id="my-input" /> إذا قام المستخدم بالضغط على هذا الزر وقام بإختيار ملف ما، أريد أن أقوم بعمل زر Clear، وعندما يقوم المستخدم بالضغط عليه يتم إزالة الملف الذي إختارها المستخدم. كيف يتم عمل reset لعنصر input من خلال جافاسكريبت JavaScript؟ 3 اقتباس
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> اقتباس
1 Wael Aljamal نشر 7 سبتمبر 2022 أرسل تقرير نشر 7 سبتمبر 2022 يمكن استهداف العنصر من خال استعلام DOM ثم إسناد قيمة فارغة له document.getElementById('my-input').value = '' يمكنك استعمال السطر السابق في أي دالة، أو كدالة حدث نقر على زر مخصص إفراغ الحقل من قيمته <button onclick="document.getElementById('my-input').value = ''"> حذف المدخلات </button> لاتحتاج هذه الطريقة وجود عنصر Form اقتباس
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> اقتباس
السؤال
Emad Saif
لدي عنصر input من نوع File لرفع بالشكل التالي:
إذا قام المستخدم بالضغط على هذا الزر وقام بإختيار ملف ما، أريد أن أقوم بعمل زر Clear، وعندما يقوم المستخدم بالضغط عليه يتم إزالة الملف الذي إختارها المستخدم.
كيف يتم عمل reset لعنصر input من خلال جافاسكريبت JavaScript؟
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.