Sales•٠٣ يوليو ٢٠٢٢•1 min read•167 words

إنشاء حقل نص محدود بـ 140 حرفًا مثل تويتر باستخدام Jquery

Emir Eskici

PlusClouds Author

Cloud & SaaS

كيفية إنشاء حقل نص محدود بـ 140 حرف باستخدام Jquery

إنشاء حقل نصي يتجاوب مع 140 حرف باستخدام jQuery

jQuery هي مكتبة JavaScript تم إنشاؤها لتسهيل استخدام JavaScript. لقد كتبت مقالة مدونة صغيرة تشرح فوائد jQuery والميزات التي يقدمها والتي تستخدم منذ عام 2006 لتلبية احتياجات JavaScript وAjax ومكتبات التأثيرات فأخذ فرصة للحديث عن ذلك. في هذه المدونة، سأجيب على سؤال كيف نجعل jQuery يحسب 140 حرفاً؟

أولاً، سأقوم بإنشاء حقل نصي بسيط مع عنصر لعرض عدد الأحرف المدخلة تحته.

HTML

Description

الآن لدينا أكواد jQuery

JavaScript/jQuery

$(function (){

$(&quot;#textAlani&quot;).keyup(function (e) { // اخترت منطقة النص وأدخلت الدوال الخاصة بي 

    var harfLimiti=140;  // حدد عدد الأحرف القصوى المسموحة
    var sayac=$(this).val().length; // أنشأت متغيراً للتحقق من عدد الأحرف 140 الموضحة أعلاه
    
    $(&quot;#girilenHarf&quot;).text(sayac) // تعريف صغير سيظهر عدد الأحرف المدخلة 
    $(&quot;#kalanHarf&quot;).text(harfLimiti-sayac) // ليظهر لنا عدد الأحرف المتبقية

    if (sayac&gt;harfLimiti) { 
        $(&quot;#uyari&quot;).text(&quot;لا يمكنك إدخال المزيد من الأحرف...&quot;)
    }// إذا تجاوز عدد الأحرف المحسوبة الرقم الموجود في متغير &apos;harfLimit&apos;، قم بإدراج نص 
    // باستخدام خاصية text &quot;لا يمكنك إدخال المزيد من الأحرف...&quot;
});

})

كيف نجعل jQuery يحسب 140 حرفاً؟

النتيجة

Description

Frequently Asked Questions

كيف أنشئ حقل نصي يحسب 140 حرفاً باستخدام jQuery كما توضّحه المقالة؟

تُحدّد قيمة الحد الأقصى للحروف في متغير باسم harfLimiti وتساوي 140. ثم تُربط دالة مع حدث keyup على عنصر النص كما في المثال، فتحسب طول النص باستخدام $(this).val().length وتعرضه في العنصر #girilenHarf وتعرض الحروف المتبقية في #kalanHarf. إذا تجاوز العدد المحسوب harfLimiti يتم وضع رسالة في العنصر #uyari تقول لا يمكنك إدخال المزيد من الأحرف...

ما دور المتغير harfLimiti ولماذا قيمته 140؟

harfLimiti يمثل الحد الأقصى لعدد الأحرف المسموح به. قيمته 140 كما ورد في الكود لأنها الغاية من المثال وهو يستخدم للمقارنة مع عدد الأحرف المدخلة لمعرفة ما إذا كان هناك تجاوز.

كيف يتم عد الأحرف وعرضها للمستخدم في المثال؟

يحسب طول النص المدخل من خلال sayac = $(this).val().length. ثم يعرض sayac في العنصر #girilenHarf ويعرض harfLimiti-sayac في العنصر #kalanHarf.

ما نوع الحدث المستخدم لمراقبة كتابة المستخدم في حقل النص؟

تم ربط حدث keyup بمنطقة النص المستهدفة داخل دالة جاهزة، حيث يتم تشغيل الكود عند كل كتابة في الحقل #textAlani.

أين أضع عناصر العرض مثل عد الأحرف والمتبقّى وتحذير الرسالة في صفحة HTML؟

يجب وجود العناصر ذات المعرفات التالية: #girilenHarf لعرض عدد الأحرف المدخلة، #kalanHarf لعرض الأحرف المتبقية، و #uyari لعرض رسالة التحذير. كما أن الحقل النصي المستهدف له المعرف #textAlani.

ماذا يحدث إذا تجاوز المستخدم الحد الأقصى للأحرف؟

عند تجاوز عدد الأحرف المحسوبة الحد harfLimiti يتم وضع النص التحذيري في العنصر #uyari تقول لا يمكنك إدخال المزيد من الأحرف...

ما النتيجة النهائية المتوقعة عند تطبيق الكود؟

يظهر حقل نصي يتجاوب مع 140 حرفاً، مع عرض العدد المدخل من الأحرف وعدد الأحرف المتبقية، وتظهر رسالة تحذير عند محاولة إدخال أحرف إضافية.

إنشاء حقل نص محدود بـ 140 حرفًا مثل تويتر باستخدام Jquery

إنشاء حقل نصي يتجاوب مع 140 حرف باستخدام jQuery

كيف نجعل jQuery يحسب 140 حرفاً؟

Frequently Asked Questions

المزيد من المدونة

ما هو قيمة النطاق؟

القنوات التي تحقق أكبر قدر من المال من خلال التسويق بالعمولة في عام 2026

استئجار خادم افتراضي: 5 عوامل حاسمة يجب مراعاتها في عام 2026

ما هي قيمة النطاق؟