جاوا اسکریپت تمام متن در Div را با کلیک ماوس انتخاب کنید

برای انتخاب کل متن یک 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);
    }
}

عملکرد جاوا اسکریپت گام به گام به شرح زیر است:

1. تابع بررسی می کند که آیا document.selection اموال وجود دارد این ویژگی فقط در نسخه های قدیمی اینترنت اکسپلورر موجود است.
2. اگر document.selection وجود دارد، تابع یک محدوده متن جدید ایجاد می کند و آن را برای احاطه متن در عنصر ID قرار می دهد id. سپس محدوده متن را با استفاده از select() روش.
3. اگر document.selection وجود ندارد، تابع اگر را بررسی می کند window.getSelection() روش وجود دارد. این روش در مرورگرهای مدرن موجود است.
4. اگر 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 روشی برای اطمینان از اینکه تمام متن انتخاب شده است.

می توانید با کلیک بر روی قسمت محتوای قابل ویرایش زیر راه حل را امتحان کنید:

این متن قابل ویرایش است. من را انتخاب کنید!

با تشکر برای خواندن. کد نویسی مبارک!

درباره نویسنده

آرتوری جلی

من یک کارآفرین و وبلاگ نویس از فنلاند هستم. هدف من این است که با راهنمایی‌ها و بررسی‌های جامع، کدنویسی و فناوری را برای شما آسان‌تر کنم.