از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
شمارشگر کاراکتر برای مناطق متنی با جاوا اسکریپت وانیلی شمارشگر کاراکتر یک ویژگی رابط کاربری مفید است که تعداد کاراکترهای باقیمانده را که کاربر می‌تواند در یک فیلد متنی وارد کند را نشان می‌دهد – اگر یک فیلد متنی به اندازه ورودی نسبتاً کوچک محدود شده باشد (مانند محدودیت توییتر). روی 280 کاراکتر در هر توییت). این ویژگی معمولا استفاده می شود …
سرفصلهای مطلب
معرفی
آ شمارنده شخصیت مفید است ویژگی رابط کاربری که تعداد کاراکترهای باقیمانده را که کاربر می تواند در یک فیلد متنی وارد کند را نشان می دهد – اگر یک فیلد متنی به اندازه ورودی نسبتاً کوچک محدود شده باشد (مانند محدودیت توییتر روی 280 کاراکتر در هر توییت). این ویژگی معمولا در کنار آن استفاده می شود ناحیه متن و/یا فیلد ورودی عناصری برای اطلاع کاربر از تعداد کاراکترهای استفاده شده و باقیمانده.
در این مقاله روش پیاده سازی یک شمارنده کاراکتر برای مناطق متنی در جاوا اسکریپت را از ابتدا یاد خواهیم گرفت.
احتمالاً مشهورترین نمونه شمارنده کاراکتر، شمارنده کاراکتر توییتر است. هنگامی که طول توییت شما نزدیک می شود و از 280 کاراکتر فراتر می رود به شما اطلاع می دهد، اما مانع از تایپ کاراکترهای بیشتر نمی شود. این ویژگی به طور گسترده ای مورد علاقه است زیرا وقتی متنی را بیشتر از طول تعیین شده کاراکترها قرار می دهید متن را قطع نمی کند و به شما امکان می دهد به طور مناسب برنامه ریزی کنید که چگونه آن را به چندین توییت تقسیم کنید!
در پایان این مقاله، می توانید یک فیلد ورودی مانند زیر ایجاد کنید:
توجه داشته باشید: تمام کدهای مربوط به ایجاد فرم در راهنما موجود خواهد بود. علاوه بر این، کد منبع و پیش نمایش زنده در دسترس هستند روی CodePen.
روش پیاده سازی یک شمارنده کاراکتر در جاوا اسکریپت
اولین چیزی که باید قبل از اجرای شمارنده کاراکتر تنظیم کنیم، یک فرم اولیه HTML است. حاوی الف خواهد بود textarea زمینه و متنی که یک پیشخوان شخصیت را نشان می دهد. حداکثر تعداد کاراکترها و تعداد کاراکترهای باقی مانده را نشان می دهد. اگر تعداد مجاز شخصیت ها بیش از حد باشد ، متن رنگ را به رنگ قرمز تغییر می دهد:
<form>
<h3>Write Bio: </h3>
<textarea name="tweet" id="textbox" class="form-control" rows="10" cols="60"></textarea>
<span id="char_count">100/100</span>
<button type="submit">Save</button>
</form>
اعلان متغیرها
پس از ایجاد یک فرم اولیه HTML، مرحله بعدی این است که با استفاده از JavaScript یک منطق پیشخوان کاراکتر را پیاده سازی کنید. اولین قدم برای ایجاد منطق JavaScript تعریف متغیرهای ما و به دست آوردن مؤلفه های DOM است که بعداً از آنها استفاده خواهیم کرد. به طور خاص textarea زمینه و span عنصر نمایش شمارنده کاراکتر:
let textArea = document.getElementById("textbox");
let characterCounter = document.getElementById("char_count");
const maxNumOfChars = 100;
این textArea برای افزودن یک مورد استفاده خواهد شد رویداد که فعال می شود تابع منطقی. رویدادهای متعددی وجود دارد که می توانیم استفاده کنیم، اما keyup بهترین مناسب برای این مورد استفاده است زیرا هر بار که یک کلید تحت فشار قرار می گیرد ، عملکرد منطق را تحریک می کند – یک کاراکتر اضافه می شود یا از آن خارج می شود textarea. این characterCounter برای نمایش پیشخوان کاراکتر استفاده می شود ، و maxNumOfChars حداکثر تعداد کاراکترهایی را که کاربر می تواند وارد کند تعریف می کند.
پیاده سازی منطق
مرحله بعدی ایجاد منطق اساسی است که به ما امکان می دهد طول متن تایپ شده را در آن تعیین کنیم textAreaو همچنین برای کسر طول از حداکثر تعداد کاراکترهایی که انتخاب کرده ایم. این همان چیزی است که ساختار عملکرد منطق می تواند به نظر برسد:
const countCharacters = () => {
// Calculate the number of characters entered into the textarea
// Calculate the number of characters left
// Display this number in the span tag
};
و در اینجا روش اجرای ساختار ذکر شده به نظر می رسد:
const countCharacters = () => {
let numOfEnteredChars = textArea.value.length;
let counter = maxNumOfChars - numOfEnteredChars;
characterCounter.textContent = counter + "/100";
};
توجه داشته باشید: لطفا این را در نظر داشته باشید countCharacters() در حال حاضر به هیچ سبکی رسیدگی نمی کند. به عنوان مثال ، ما می خواهیم هنگام نزدیک شدن یا فراتر از حداکثر تعداد کاراکترها ، رنگ پیشخوان را به قرمز تبدیل کنیم. ما این را در یک لحظه اجرا خواهیم کرد، زیرا این یک نوع اضافه ذهنی تر است.
سرانجام ، برای این که این کار کار کند ، ما باید اضافه کنیم eventListener این روش باعث ایجاد/فراخوانی این روش در هر زمان یک کاراکتر اضافه می شود/از آن خارج می شود textarea میدان با استفاده از input رویداد. به طور متناوب، می توانیم از آن استفاده کنیم keyup یا keydown رویدادها در عوض:
textArea.addEventListener("input", countCharacters);
سفارشی کردن رنگ شمارنده
ما می‌خواهیم زمانی که کاربر از حداکثر تعداد کاراکترهای تعریف‌شده فراتر رفت و همچنین زمانی که به آن نزدیک می‌شوند، «هشدار» بدهیم. این به راحتی با استفاده از دستورات شرطی انجام می شود که در آن بررسی می کنیم که آیا counter کمتر از صفر یا کمتر از مثلاً 20 اگر بخواهیم به آنها هشدار دهیم که به حد مجاز نزدیک می شوند:
if (counter < 0) {
characterCounter.style.color = "red";
} else if (counter < 20) {
characterCounter.style.color = "orange";
} else {
characterCounter.style.color = "black";
}
در اینجا، ما فقط متن را تغییر داده ایم روی تعداد کاراکترهای باقی مانده چیزهای زیادی وجود دارد که می توانید در آنجا تغییر دهید. به عنوان مثال، شما می توانید غیر فعال کنید textarea اگر کاراکترهای زیادی تایپ شده است، محتوا را به صورت خودکار کوتاه کنید و غیره روی.
نتیجه
در این راهنمای کوتاه – ما نگاهی به روش ایجاد یک شمارنده کاراکتر و اتصال آن به یک ناحیه متنی در جاوا اسکریپت، از ابتدا، با حداقل کد و عملکرد، انداخته‌ایم.
منتشر شده در 1403-01-10 12:43:07
