

برای انتخاب کل متن یک div با یک کلیک ماوس در جاوا اسکریپت، می توانید از کد زیر استفاده کنید:
HTML:
<div id="sample" onclick="highlight('sample')"><b>Click this paragraph once and it's highlighted by JavaScript!</b></div>
جاوا اسکریپت:
function highlight(id) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(id)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(id)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } }
عملکرد جاوا اسکریپت گام به گام به شرح زیر است:
- تابع بررسی می کند که آیا
document.selection
اموال وجود دارد این ویژگی فقط در نسخه های قدیمی اینترنت اکسپلورر موجود است. - اگر
document.selection
وجود دارد، تابع یک محدوده متن جدید ایجاد می کند و آن را برای احاطه متن در عنصر ID قرار می دهدid
. سپس محدوده متن را با استفاده ازselect()
روش. - اگر
document.selection
وجود ندارد، تابع اگر را بررسی می کندwindow.getSelection()
روش وجود دارد. این روش در مرورگرهای مدرن موجود است. - اگر
window.getSelection()
وجود دارد، تابع یک محدوده جدید ایجاد می کند که عنصر را با ID در بر می گیردid
. سپس هر گونه انتخاب موجود را با استفاده ازremoveAllRanges()
روش و محدوده جدید را با استفاده از گزینه به انتخاب کاربر اضافه می کندaddRange()
روش.
به روز رسانی: از آنجایی که اینترنت اکسپلورر دیگر استفاده نمی شود، ممکن است بخواهید تابع if-else را حذف کرده و به جای آن از کد موجود در بلوک else استفاده کنید.
function highlight(id) { var range = document.createRange(); range.selectNode(document.getElementById(id)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); }
راه حل های کد بالا را با کلیک بر روی عنصر متن تست کنید:
یک بار روی آن پاراگراف کلیک کنید و با جاوا اسکریپت هایلایت می شود!
راه حل جایگزین: از CSS استفاده کنید
برای اینکه یک div متن HTML قابل انتخاب با کلیک یک دکمه باشد، می توانید از CSS استفاده کنید. به این ترتیب، شما اصلا نیازی به استفاده از جاوا اسکریپت ندارید.
برای این کار می توانید استفاده کنید user-select
مشخصات به شرح زیر است.
CSS:
.sample { -webkit-user-select: all; -ms-user-select: all; user-select: all; }
HTML:
<div class="sample"><b>Click this paragraph once and it's highlighted by CSS!</b></div>
می توانید این راه حل را با کلیک بر روی پاراگراف زیر تست کنید:
یک بار روی آن پاراگراف کلیک کنید و CSS علامت گذاری می شود!
مراقب عناصر محتوای قابل ویرایش باشید!
عناصر قابل ویرایش محتوا، عناصر HTML هستند که توسط کاربر قابل ویرایش هستند، مانند div
، span
و p
عناصر. این موارد دارند contenteditable
صفت روی true تنظیم شده است. هنگامی که یک عنصر دارای محتوای قابل ویرایش باشد، کاربر می تواند با محتوای آن تعامل داشته باشد، گویی در حال ویرایش یک سند در یک واژه پرداز است.
هنگام استفاده از جاوا اسکریپت برای انتخاب متن در یک عنصر محتوای قابل ویرایش، استفاده از آن مهم است selectNodeContents
روش به جای selectNode
. را selectNodeContents
متد کل محتوای عنصر while را انتخاب می کند selectNode
فقط خود عنصر را انتخاب می کند.
به عنوان مثال:
HTML:
<div contenteditable="true" onclick="selectEditableText(this)"> This is some editable text. Select me! </div>
جاوا اسکریپت:
function selectEditableText(element) { const range = document.createRange(); range.selectNodeContents(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }
در این کد تابعی به نام تعریف می کنیم selectEditableText
به یک استدلال نیاز دارد، element
. این تابع یک محدوده جدید ایجاد می کند که تمام متن را در بر می گیرد element
آن محدوده را انتخاب می کند و به انتخاب کاربر اضافه می کند.
در HTML اضافه می کنیم onclick
به محتوای قابل ویرایش نسبت دهید div
و عبور کنید this
به عنوان استدلال از selectEditableText
تابع. را this
کلمه کلیدی به عنصری اشاره دارد که رویداد را فعال کرده است، که در این مورد محتوای قابل ویرایش است div
.
از آنجایی که محتوای عنصر قابل ویرایش است، استفاده می کنیم selectNodeContents
روشی برای اطمینان از اینکه تمام متن انتخاب شده است.
می توانید با کلیک بر روی قسمت محتوای قابل ویرایش زیر راه حل را امتحان کنید:
این متن قابل ویرایش است. من را انتخاب کنید!
با تشکر برای خواندن. کد نویسی مبارک!
درباره نویسنده
- من یک کارآفرین و وبلاگ نویس از فنلاند هستم. هدف من این است که با راهنماییها و بررسیهای جامع، کدنویسی و فناوری را برای شما آسانتر کنم.