تنسيق رقم الهاتف في JavaScript: صياغة (123)456-7890

عند النظر إلى الشيفرة التي قمت بتوفيرها في jsFiddle، يتضح أنك تقوم بتنسيق رقم الهاتف بواسطة استخدام حدث “blur” على عنصر إدخال النص. يتم استخدام تعبير منتظم لتنسيق الرقم الذي يتم إدخاله، ولكنك ترغب في تغيير الصيغة إلى “(123)456-7890” بدلاً من “123-123-1123”.

لتحقيق هذا التنسيق المطلوب، يمكنك إجراء بعض التعديلات على الشيفرة الحالية. يمكنك استخدام الكود التالي لتحقيق الصيغة المرغوبة:

htmlCopy code
<input class="" type="text" name="primary_phone" id="primary_phone" maxlength="10" placeholder="1234567890">

<script>
    $("#primary_phone").blur(function () {
        var text = $(this).val().replace(/(\d{3})(\d{3})(\d{4})/, "($1)$2-$3");
        $(this).val(text);
    });
script>

بتلك التعديلات، يتم الآن عرض الرقم بالصيغة “(123)456-7890” بدلاً من “123-123-1123” عند فقدان التركيز عن عنصر إدخال النص.

يعتمد هذا على فهمي للسياق والشيفرة المقدمة. إذا كان لديك أي متطلبات إضافية أو تحتاج إلى مساعدة إضافية، يرجى توضيحها لكي أقدم المساعدة بشكل أكثر دقة.

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

عندما يحدث هذا الحدث، يتم تنفيذ وظيفة معينة باستخدام الدالة المرتبطة بحدث “blur”. في هذه الحالة، يتم استخدام تعبير منتظم (Regex) لتحديد وتقسيم أجزاء الرقم الذي تم إدخاله. بعد ذلك، يتم استخدام الأجزاء المحددة من الرقم في تكوين نص جديد بناءً على الصيغة المحددة.

تحديداً، يتم استخدام الكود التالي:

javascriptCopy code
var text = $(this).val().replace(/(\d{3})(\d{3})(\d{4})/, "($1)$2-$3");
$(this).val(text);

في هذا الكود، يتم استخدام الدالة replace() لتحديد أي تطابق للتعبير المنتظم في الرقم الذي تم إدخاله، ومن ثم يتم استبداله بالنص الجديد الذي يتبع الصيغة المطلوبة “(123)456-7890”.

يتيح هذا النهج لك تخصيص صيغة رقم الهاتف وفقًا لاحتياجاتك الخاصة. يجب عليك فقط ضبط التعبير المنتظم وهيكل النص وفقًا للصيغة التي ترغب في تحقيقها.