الرئيسية / برمجه / شرح حساب عدد الأحرف داخل Textarea بواسطة Oninput

شرح حساب عدد الأحرف داخل Textarea بواسطة Oninput


شرح حساب عدد الأحرف داخل Textarea بواسطة Oninput 

بسم الله الرحمن الرحيم اليوم ان شاء الله سوف نقوم بي شرح حساب عدد الأحرف داخل Textarea بواسطة Oninput في لغة java Script جميعنا يعلم ان لغة جافا هيه احد اكبر لغات البرمجة التي يتفرع منها عدد اقسام منها ما يتعلق بتطبقات الهواتف الذكية ومنها ما يتعلق بي برمجة الالعاب ومنها ما يتعلق بي برمجة المواقع الالكترونية اليوم سوف نتكلم عن القسم الذي يتعلق ببرمجة المواقع

الالكترونية, برمجة المواقع الالكترونية عن طريق الجافا يتفرع الى قسمين اساسين القسم الاول هوه تصميم الموقع لا شك ان لغة الجافا استخدامها اثناء تصميمك لموقع ما تضيف له لمسة جمالية بمختلف الطرق وجافا ساعدت مصممين المواقع بأنها قامت بطرح مكتبة لتسهل عليك اضافة اللمسات التجميلية داخل الموقع هذه المكتبة تحت مسمى jquery  هذه المكتبة تقوم بتسهيل واضافة العديد من الاشياء في عالم تصميم المواقع ولا شك ان كل مصمم مواقع يجب ان يكون على علم بها لان العديد من المكتبات الاخرى التي تساعد في تصميم المواقع تعتمد عليها والبعض الاخر يعتمد عليها بشكل كلي…



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

نبدا بشرح الكود

اولا نقوم بأنشاء ملف html عادي ونسميه index.html كما تعودنا ونكتب فيه الكود المتعارف عليه نربط الصفحة الاساسي بصفحة style.css و صفحة اخرى main.js ونضع الصفح كلها داخل ملف واحد وبعد ذلك داخل وسم body نقوم بأنشاء form وبداخل form نقوم بوضع textarea و span نعطي textarea
id بأسم text ونعطي span اي دي اخر بأسم count كما في الشكل التالي :

<!DOCTYPE html>
<html>
<head>
<title>Oninput | omdda.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<textarea id="text" rows="20" cols="80" maxlength="100"></textarea>
<span id="count">100</span>
</form>
http://main.js
</body>
</html>



بعد تنفيذ هذه الخطوة ننتقل مباشرة الى صفحة main.js ونبداء في كتابة الكود البسيط هناك,

اولا نقوم بأنشاء متغير ليجمع لنا جميع الحقول التي نريد التعديل عليها وهيه textarea و count span و Attribute الخاص بي textarea الا وهوه maxlength كما في الشكل التالي :

var $count = document.getElementById('count'),
$textarea = document.getElementById('text'),
$maxLength = $textarea.getAttribute('maxlength');



بعد تنفيذ هذه العملية نقوم بكتابة الكود الخاص بحساب عدد الاحرف داخل textarea في الاول نقوم بأخذ المتغير textarea ونضعه لنكتب الدالة الخاصة التي من خلالها سوف نقوم بتعريف اعلى رقم وهوه 100 حرف ونقوم بطرح منه عدد الاحرف المكتوبة في textarea ليقوم بالتغير بشكل تلقائي على span count وبعد ذلك نقوم بأضافة دالة if الشرطية بأنها اذا عدد الاحرف داخل count span تساوي صفر نقوم بأضافة class ونسميه على سبيل المثال mahmoud وهذا class سوف نقوم بالتعديل عليه في صفحة style لنجعل لونه احمر عند العدد 0 ونقوم بحذفه اذا كان العدد اكبر من 0 كما في الشكل التالي :

$textarea.oninput = function (){
$count.innerHTML = $maxLength - this.value.length;
if ($count.innerHTML == 0) {
$count.classList.add('mahmoud');
}else {
$count.classList.remove('mahmoud');
}
};

بعد اتمام هذه الخطوة الان نقوم بفتح ملف style.css ونكتب فيه هذا الكود الذي سوف يعرف لنا class ونقوم بتغير اللون الى اللون الاحمر كما في الشكل التالي :

.mahmoud {
color: #e74c3c;
}

وبهذا نكون قد انتهينا من انشاء دالة بسيطة عن طريق اداة Oninput داخل java لتقوم بعُد واحتساب عدد الاحرف داخل الحقل وهذه الطريقة مستخدمة في اشهر المواقع العالمية مثل موقع twitter والذي قائم كاملا على هذه الفكرة انه مخصص لك عدد معين من الاحرف لتكتب منشوراتك بشكل بسيط وسهل وقصير.

يمكنك تحميل ملف العمل من خلال الضغط هنا

مقالات اخرى قد تعجبك من هنا