مقدمه‌ای بر موضوع
انتخاب و قراردادن نشانگر متنی در صفحات وب یکی از امکانات جالب و کاربردی است که اکثر وبسایت‌ها در تجربه کاربری خود بکار می‌گیرند. برای مثال، حتماً دیده‌اید که می‌توانید متون را انتخاب کنید یا نشانگر را بین حروف متنی مختلف حرکت دهید و بر روی نقاط مختلف آن کلیک کنید. این موضوع اهمیت دارد چون به کاربر اجازه می‌دهد که با متن یا اطلاعات موجود در صفحه تعامل داشته باشد.چگونگی پیاده‌سازی
باوجود این که زبان‌های HTML و CSS ذاتاً ابزارهای غنی برای کنترل نشانگر ندارند، اما با استفاده از جادوی جاوااسکریپت می‌توان این کنترل را پیاده‌سازی کرد. اساساً ما باید از رویدادهای جاوااسکریپت برای پردازش کلیک‌های کاربر و مدیریت آن استفاده کنیم.نیازمندی‌ها
لازم است که ابتدا آشنایی اولیه با HTML و CSS داشته باشید. اگر هنوز با جاوااسکریپت کار نکرده‌اید، نگران نباشید، کدی که در ادامه ارائه خواهد شد نسبتاً ساده است. همچنین، اگر مدت‌هاست جاوااسکریپت کار نکردید، این موضوع می‌تواند فرصت خوبی برای تمرین شما باشد.نگاهی به کد
حال می‌خواهیم به جزئیات دقیق کد که همین قابلیت را پیاده‌سازی کرده است، نگاهی بیندازیم. سعی کرده‌ایم تا آنجا که امکان دارد کدها بهینه و قابل استفاده باشند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placing Cursor Between Nodes - مینی لرن</title>
<style>
.selectable-area {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
cursor: text;
}
</style>
</head>
<body>
<div class="selectable-area" contenteditable="true">
<p>این یک متن قابل ویرایش است بین این جملات کلیک کنید!</p>
</div>
<script>
document.querySelector('.selectable-area').addEventListener('click', function(event) {
const range = document.createRange();
const sel = window.getSelection();
range.setStart(event.target, 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
});
</script>
</body>
</html>
توضیح خط به خط کد
<!DOCTYPE html> این خط، صفحه را به عنوان یک سند HTML5 تعریف می‌کند.
<html lang="fa"> عنصر
html با زبان فارسی تعریف شده است.<meta charset="UTF-8"> تعیین مجموعه کاراکتر به UTF-8 برای پشتیبانی از کاراکترهای استاندارد.~
<style> ... </style> در اینجا سبک ظاهری ناحیه قابل انتخاب تعریف شده است.
<div class="selectable-area" contenteditable="true"> یک
div با قابلیت ویرایش متنی تعریف شده است که کاربر می‌تواند روی آن کلیک کند و نشانگر را جا به‌جا کند.<script> ... </script> اسکریپت جاوااسکریپت برای مدیریت کلیک کاربران و جابه‌جایی نشانگر اجرا می‌شود.