تحديث رابط WhatsApp بناءً على النص في TextArea

بدايةً، يبدو أنك تواجه تحديًا في الحصول على قيمة النص في TextArea دون الحاجة إلى النقر على زر. وفي الواقع، هذا تحدي مشترك ولكنه قابل للحل.

للقيام بذلك، يمكنك استخدام JavaScript للوصول إلى قيمة النص في TextArea دون الحاجة إلى النقر على زر. بدلاً من ذلك، يمكنك استخدام حدثًا مثل “oninput” لرصد أي تغيير في المحتوى داخل TextArea وتحديث قيمة الرابط لتشمل النص المدخل.

فيما يلي كيفية تنفيذ ذلك:

1. قم بإضافة حدث “oninput” إلى TextArea للكشف عن أي تغيير في النص.
2. استخدم JavaScript للوصول إلى قيمة TextArea عند حدوث تغيير وتحديث قيمة الرابط بما يعكس النص الجديد.

اليك الكود المقترح:

htmlCopy code
<textarea id="input_output" style="width:95%;" rows="10" wrap="soft" oninput="updateWhatsAppLink(this.value)">Enter Text Here..textarea>
<a id="whatsapp_link" href="whatsapp://send" class="wa_btn wa_btn_s" style="display:none">Sharea>

<script>
// هذه الوظيفة تقوم بتحديث الرابط ليتضمن النص المدخل في TextArea
function updateWhatsAppLink(text) {
    // احصل على عنصر الرابط
    var whatsappLink = document.getElementById('whatsapp_link');
    // إذا كان النص غير فارغ، قم بتحديث معلمات الرابط ليشمل النص
    if (text.trim() !== '') {
        whatsappLink.setAttribute('data-text', text);
    }
    else {
        // إذا كان النص فارغ، قم بإزالة معلمة النص من الرابط
        whatsappLink.removeAttribute('data-text');
    }
}

// قم بتشغيل الوظيفة مرة عند تحميل الصفحة للتأكد من أن الرابط يتم تحديثه إذا كان النص غير فارغ منذ البداية
window.onload = function() {
    updateWhatsAppLink(document.getElementById('input_output').value);
};
script>

هذا الكود يعمل على تحديث معلمة “data-text” في رابط WhatsApp عندما يتغير النص في TextArea. يتم ذلك عن طريق استدعاء الوظيفة updateWhatsAppLink() في حدث “oninput” الذي يتم تنشيطه عندما يتم إدخال أو تغيير النص في TextArea.

بالطبع، يمكنني توفير المزيد من المعلومات حول الطريقة التي تم بها تنفيذ الحل وبعض النقاط الإضافية ذات الصلة.

1. حدث “oninput”: هذا الحدث يتم تنشيطه عندما يتم إدخال أو تغيير النص في TextArea. باستخدام حدث “oninput”، يتمكن المستخدم من تحديث قيمة الرابط تلقائيًا دون الحاجة إلى النقر على زر.

2. وظيفة “updateWhatsAppLink()”: هذه الوظيفة مسؤولة عن تحديث معلمة “data-text” في رابط WhatsApp بناءً على النص المدخل في TextArea. تقوم الوظيفة بفحص النص المدخل، وإذا كان غير فارغ، فإنها تحدث قيمة “data-text” لتشمل هذا النص. وإذا كان النص فارغًا، فإنها تقوم بإزالة معلمة “data-text” تمامًا.

3. الربط بالعنصر النشط: يتم تحديد الرابط باستخدام الهوية “whatsapp_link”، ويتم تحديث معلمة “data-text” في هذا الرابط باستخدام وظيفة JavaScript المذكورة أعلاه.

4. تحديث الرابط عند تحميل الصفحة: تقوم الوظيفة window.onload بتشغيل الوظيفة updateWhatsAppLink() عندما يتم تحميل الصفحة. هذا يضمن أن الرابط يتم تحديثه حتى إذا كان النص في TextArea غير فارغ عند تحميل الصفحة.

5. تحسينات إضافية: يمكنك النظر في إضافة مزيد من التحسينات مثل التحقق من صحة البيانات المدخلة، أو تخصيص المظهر والأسلوب لتلبية احتياجات تصميم التطبيق الخاص بك.

باستخدام هذا الحل، يمكن للمستخدمين الآن مشاركة النص من TextArea في WhatsApp بسهولة دون الحاجة إلى النقر على زر، مما يوفر تجربة مستخدم سلسة وفعالة.