نحوه حفظ عملکرد جعبه قابل ویرایش محتوا با تغییر رنگ

در توسعه وب مدرن ، ایجاد یک رابط کاربری پویا با عناصر تعاملی بسیار مهم است. یک مورد استفاده مشترک این است contenteditable ویژگی ، که به کاربران امکان می دهد متن را مستقیماً در یک عنصر بلوک ویرایش کنند. در این مقاله ، ما به یک چالش خاص می پردازیم: چگونه می توان رنگ شخصیت های خاص را تغییر داد در حالی که هنوز هم به کاربران امکان می دهد آزادانه در یک تایپ کنند contenteditable قسمت

درک مشکل

این مسئله از نحوه دستکاری HTML درونی آن ناشی می شود contenteditable قسمت هنگام استفاده innerHTML برای جایگزینی کاراکترها با یک ظاهر طراحی شده عناصر ، به طور موثری کل محتوای DIV را تازه می کند و باعث می شود موقعیت مکان نما تنظیم مجدد شود و منجر به یک تجربه کاربری ناامید کننده شود. این همچنین می تواند از تایپ کاربران جلوگیری کند ، زیرا ممکن است زمینه ورودی فعلی خود را از دست بدهند.

اجرای فعلی شما

قطعه کد زیر نمونه ای از نحوه تلاش برای اجرای رنگ آمیزی شخصیت است:

function checkIt(code) {
   var fixedCode = document.getElementById(code);
   var lTags = fixedCode.innerHTML.replace(/&lt;/gi, "<span style="color:gold;">&lt;</span>");
   var rTags = lTags.replace(/&gt;/gi, "<span style="color:gold">&gt;</span>");
   fixedCode.innerHTML = rTags;
}

چرا فقط برچسب سمت چپ رنگ را تغییر می دهد

عملکرد فعلی شما فقط اعمال یک ظاهر طراحی شده است (color: gold) به < نماد (<). دلیل اصلی شما نمی توانید تغییراتی را در آن مشاهده کنید > نماد (>) احتمالاً مربوط به روش جایگزینی رشته است. در حالی که شما هر دو شخصیت را جایگزین می کنید ، قالب بندی و رسیدگی به عملکرد جایگزین می تواند منجر به نتایج غیرقابل پیش بینی در DOM شود.

راه حل های مشکل

برای حفظ ورودی کاربر و جلوه های بصری در نظر گرفته شده ، باید در مورد رویکرد خود تجدید نظر کنید. در اینجا یک راه حل گام به گام وجود دارد که به کاربران امکان می دهد بدون از دست دادن عملکرد آزادانه تایپ کنند.

مرحله 1: موقعیت مکان نما را ذخیره کنید

قبل از تغییر محتوا ، حفظ موقعیت مکان نما فعلی در ورودی متن بسیار حیاتی است. شما می توانید با استفاده از API های انتخاب و دامنه در JavaScript به این هدف برسید:

function saveCursorPosition() {
    let sel = window.getSelection();
    return sel.getRangeAt(0);
}

مرحله 2: HTML داخلی را با خیال راحت به روز کنید

به جای تنظیم مجدد کل innerHTML، به روزرسانی فقط گره های متنی مربوطه یا اضافه کردن دهانه ها به عنوان انواع کاربر را در نظر بگیرید. در اینجا یک نسخه اصلاح شده از عملکرد شما آورده شده است:

function checkIt(code) {
   var fixedCode = document.getElementById(code);
   // Extract the current selection
   var sel = window.getSelection();
   var range = sel.getRangeAt(0);

   // Extract text, replace characters and reinsert into the document
   var content = fixedCode.innerText;
   content = content.replace(/<");
   content = content.replace(/>/g, ">");
   fixedCode.innerHTML = content;

   // Restore selection to where it was
   range.collapse(false);
   sel.removeAllRanges();
   sel.addRange(range);
}

مرحله 3: ساختار HTML

ساختار HTML تا حد زیادی بدون تغییر باقی مانده است ، اما در اینجا یک یادآوری است:

See for yourself

پایان

با استفاده از این تنظیمات ، کاربران باید بتوانند تایپ کنند contenteditable جعبه ضمن حفظ عملکرد تغییر رنگ برای شخصیت های خاص. این راه حل JavaScript اساسی را به طور موثری و بدون تکیه بر jQuery ، هماهنگ کردن با ترجیحات شما ، یکپارچه می کند. با حفظ موقعیت مکان نما ، شما یک تجربه یکپارچه را ارائه می دهید که باعث افزایش تعامل می شود.

سوالات متداول

س: چه شخصیت هایی را می توانم سبک کنم contenteditable جعبه؟

پاسخ: شما می توانید شخصیت های مختلفی را با استفاده از همان روشی که در بالا نشان داده شده است سبک کنید. فقط عملکرد جایگزین را برای شخصیت ها یا الگوهای مختلف سفارشی کنید.

س: آیا این روش برای ورودی های متن بزرگ کارآمد است؟

پاسخ: این روش برای ورودی های متوسط ​​انجام می شود. برای نوشته های متن بسیار بزرگ ، بهینه سازی منطق دستکاری متن را بیشتر در نظر بگیرید.

س: آیا این کار در همه مرورگرها خواهد بود؟

پاسخ: بله ، استفاده شده Selection وت Range API ها در مرورگرهای مدرن به طور گسترده پشتیبانی می شوند. همیشه برای اطمینان از رفتارهای مداوم ، در مرورگرهای هدف خود آزمایش کنید.