Select All Text in Div with a Mouse Click in JavaScript

In this article, we will explain the idea behind JavaScript Select All Text in Div with a Mouse Click, Select All Text in Div with a Mouse Click with JavaScript, and How Select All Text in Div with a Mouse Click with JavaScript.

Now, we can use the below code to select all div text with a single mouse click in JavaScript:

If you want then buy a good, reliable, secure web hosting service  from here: click here

HTML

<div id="sample" onclick="highlight('sample')"><b>Click this paragraph once and it's highlighted by JavaScript!</b></div>

JavaScript

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);
    }
}

Previous JavaScript Articles

• JavaScript Variables
• JavaScript Operators
• Creating an Object in JavaScript
• Introduction to Asynchronous JavaScript
• Control Flow in JavaScript
• What is JavaScript Regex?
• JavaScript Events Example
• How to create a preloader in JavaScript?
• forEach method in JavaScript
• Sorting Arrays in JavaScript
• Linear Search in JavaScript
• Pagination in Vanilla JavaScript
• Transform Arrays with Map() Method
• How to change an element’s class with JavaScript
• Selection Sort in JavaScript

Here, the JavaScript function does step-by-step as:

1. Firstly, the function checks whether the selectionproperty exists and this property is only available in older versions of the Internet Explorer browser.
2. Secondly, if selectionexists, the function creates a new text range and positions it to inclose the text within the element with the ID id. And then selects the text range using the select() method.
3. Thirdly, if selectiondoes not exist and the function checks whether the window.getSelection() method exists and this method is available for modern browsers.
4. Fourthly, if window.getSelection() exists, and the function will create a new range that contains the element with the ID id. and then deletes any existing selections using the removeAllRanges() method and adds the new range to the users’ selection using the addRange() method.

function highlight(id) {
    var range = document.createRange();
    range.selectNode(document.getElementById(id));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
}

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

Be Careful with Content Editable Elements!

So, here we know the Content editable elements are HTML elements that can be edited by the user, such as span, div, and p elements.

So, these elements have the content editable attribute set to “true” and when an element is content editable, the user can interact with its contents as if they were editing a document in a word processor.

Example below:

HTML

<div contenteditable="true" onclick="selectEditableText(this)">
    This is some editable text. Select me!
</div>

JavaScript

function selectEditableText(element) {
    const range = document.createRange();
    range.selectNodeContents(element);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

From this code, we define a function called selectEditableText that takes one argument, element. This function creates a new range that contains all of the text within the element, selects that range, and adds it to the user’s selection.

Because the element is content editable, we use the selectNodeContents method to make sure that all of the text is selected.

If you want then buy a good, reliable, secure web hosting service  from here: click here

That’s it. If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.