لتحقيق هذا الهدف، يمكنك استخدام JavaScript لتقديم حل بسيط وفعال. يمكنك تنفيذ دالة JavaScript تقوم بالتقاط الحدث “oninput” من الحقل النصي، ثم تحويل الحرف الأول من كل جملة إلى حرف كبير.
هنا مثال على كيفية تحقيق ذلك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capitalize First Lettertitle>
head>
<body>
<div class="form-group">
<label for="name" class="label-head">Company Name <sup><span
class="glyphicon glyphicon-asterisk red" aria-hidden="true">span>sup>label>
<input type="text" class="form-control text-box-length input-lg" id="companyname" placeholder="Enter Your Company Name" data-validation="required" maxlength="50">
div>
<script>
// Function to capitalize first letter of each sentence
function capitalizeFirstLetter(input) {
return input.replace(/^(.)|\.\s+(.)/gm, function ($1) {
return $1.toUpperCase();
});
}
// Add event listener to the input field
document.getElementById("companyname").addEventListener("input", function () {
var value = this.value;
this.value = capitalizeFirstLetter(value);
});
script>
body>
html>
في هذا المثال، تم إنشاء دالة capitalizeFirstLetter التي تأخذ سلسلة نصية كمدخل وتقوم بتحويل الحرف الأول من كل جملة إلى حرف كبير. ثم تم إضافة مستمع حدث “input” إلى الحقل النصي، حيث يتم استدعاء الدالة capitalizeFirstLetter عندما يتم إدخال أي تغيير في المدخل.
المزيد من المعلومات
بالتأكيد! سنواصل توسيع المقال لتشمل شرحاً أعمق وأكثر تفصيلاً.
في البداية، يجب أن نتفهم كيفية عمل الكود المقترح. الدالة capitalizeFirstLetter تستخدم تعبيرًا منتظمًا للعثور على الحرف الأول لكل جملة. تبحث هذه الدالة عن الحرف الأول في السلسلة بأكملها أو بعد أي نقطة تليها مسافة. عند العثور على هذا الحرف، يتم استبداله بنفس الحرف بالحالة الكبيرة باستخدام الدالة toUpperCase().
بالنسبة للكود الذي يتعلق بالمدخل نفسه، فإن addEventListener يقوم بإضافة مستمع حدث “input” إلى الحقل النصي. هذا يعني أن الكود سيتفاعل مباشرة عندما يتم إدخال أي تغيير في المحتوى الموجود في الحقل النصي. عندما يحدث تغيير، سيتم استدعاء الدالة المحددة، التي بدورها ستقوم بتطبيق التحويل اللازم على النص الذي تم إدخاله.
لتحقيق النتيجة المطلوبة، يجب أن يتم تضمين الكود السابق في عنصر script في الصفحة HTML الخاصة بك. ويمكنك تحريك الكود داخل ملف JavaScript منفصل ومرتبط بهذه الصفحة.
عندما تتوجه إلى موقعك على الويب، يمكنك الآن إدخال أي نص في حقل الإدخال وملاحظة كيفية تغيير حرف البداية من كل جملة ليكون بالحالة الكبيرة تلقائيًا.
وبالطبع، يمكنك تخصيص هذا الكود بما يتناسب مع متطلباتك الخاصة. على سبيل المثال، يمكنك توسيع الدالة capitalizeFirstLetter لتغطي حالات أخرى لتحويل الحروف إلى حالة كبيرة، مثل حالة الأحرف الأولى في الكلمات أو تطبيق القواعد الخاصة بالأسماء الخاصة. ويمكنك أيضًا تطبيق هذه الفكرة على حقول النص الأخرى في موقعك أو تطبيقك.
باستخدام هذه الطريقة، يمكنك تحسين تجربة المستخدم وجعل عملية إدخال البيانات أكثر سهولة وسلاسة، مما يساهم في جعل موقعك أكثر احترافية وجاذبية للزوار.
