Sales1 min read167 words

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

Emir Eskici

PlusClouds Author

Cloud & SaaS

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

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

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

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

HTML

Description

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

JavaScript/jQuery

$(function (){

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

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

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

})

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

النتيجة

Description

LeadOcean

Sales team chasing the wrong leads?

1.8B+ companies — search always free

Find My Leads →

No credit card · Cancel anytime

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 حرفاً، مع عرض العدد المدخل من الأحرف وعدد الأحرف المتبقية، وتظهر رسالة تحذير عند محاولة إدخال أحرف إضافية.

Related Reading

Posts tagged with:

The 48-Hour Activation Window: How to Turn a Buying Signal into a Booked Meeting Before Your Competitor Even Sees It
Sales

The 48-Hour Activation Window: How to Turn a Buying Signal into a Booked Meeting Before Your Competitor Even Sees It

B2B buying signals decay fast, and most sales teams lose the advantage by waiting days to act. This guide breaks down how to build a 48-hour activation workflow using LeadOcean and Eaglet to turn raw intent signals into personalised, booked meetings before competitors even open their CRM.

How to Build a First-Party Intent Stack That Feeds LeadOcean: From Website Visitor to Verified Decision-Maker in One Workflow
Sales

How to Build a First-Party Intent Stack That Feeds LeadOcean: From Website Visitor to Verified Decision-Maker in One Workflow

Most B2B demand-generation teams ignore the buying signals already embedded in their own website, content, and product analytics. This guide explains how to build a first-party intent stack that resolves anonymous visitor traffic into verified decision-maker contacts, applies composite intent scoring, and routes high-intent accounts into HubSpot or Salesforce automatically using LeadOcean and Eaglet by PlusClouds.

Signal-First Outbound: How to Build a Personalized-at-Scale Prospecting System That Gets 18 % Reply Rates
Sales

Signal-First Outbound: How to Build a Personalized-at-Scale Prospecting System That Gets 18 % Reply Rates

B2B inboxes in 2026 are overwhelmed with generic cold email, pushing market-wide reply rates below 2%. This guide explains how to build a signal-first, personalized-at-scale outbound system that consistently achieves 18% reply rates by triggering outreach on real buying events and using AI-powered enrichment tools like LeadOcean and Eaglet.

Dark Funnel Prospecting: How to Detect and Reach B2B Buyers Before They Ever Fill Out a Form
Sales

Dark Funnel Prospecting: How to Detect and Reach B2B Buyers Before They Ever Fill Out a Form

The dark funnel accounts for roughly 70% of the B2B buyer journey before any prospect fills out a form, meaning most pipeline opportunities are invisible to standard marketing automation. This guide explains how to detect reliable buying signals, avoid false-positive intent data, and build a workflow that gets your outreach in front of the right buyer at the right moment.