Рубрики

Как установить позицию курсора в редактируемом элементе контента с помощью JavaScript?

Для установки позиции курсора в редактируемых элементах контента, таких как тег div, используется интерфейс JavaScript Range. Диапазон создается с использованием метода document.createRange () .

Подход 1:

  • Сначала создайте Range и установите позицию, используя приведенный выше синтаксис.
  • Получить пользовательский ввод из тега ввода с помощью jQuery
    $("input']").val();
    
  • При нажатии кнопки назначьте входное значение функции диапазона, чтобы вернуть позицию курсора на div.

Следующий синтаксис объясняет четко:

Синтаксис:

// document.createRange() creates new range object
var rangeobj = document.createRange();

// Here 'rangeobj' is created Range Object
var selectobj = window.getSelection();

// Here 'selectobj' is created object for window
// get selected or caret current position.
// Setting start position of a Range
rangeobj.setStart(startNode, startOffset);

// Setting End position of a Range
rangeobj.setEnd(endNode, endOffset);

// Collapses the Range to one of its
// boundary points
rangeobj.collapse(true);

// Removes all ranges from the selection
// except Anchor Node and Focus Node
selectobj.removeAllRanges();

// Adds a Range to a Selection
selectobj.addRange(rangeobj);

Пример 1: Ниже приведен пример, показывающий, как установить позицию курсора каретки для элемента div с редактируемым содержимым на основе пользовательского ввода.

<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="utf-8">

    <meta name="viewport"

        content="width=device-width, initial-scale=1">

  

    <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

    </script>

      

    <style>

        div {

            outline-color: red;

            caret-color: red;

            color: #ddd;

            width: 550px;

            text-align: justify;

            border: 2px solid red;

        }

    </style>

</head>

  

<body>

    <center>

        <h1 style="color:green;padding:13px;">

            GeeksforGeeeks

        </h1>

        <br>

          

        <div id="editable" contenteditable="true"

                    spellcheck="false">

            HTML stands for Hyper Text Markup Language.

            It is used to design web pages using markup 

            language. HTML is the combination of Hypertext

            and Markup language. Hypertext defines the link 

            between the web pages. Markup language is used 

            to define the text document within tag which 

            defines the structure of web pages. HTML is a 

            markup language which is used by the browser

            to manipulate text, images and other content 

            to display it in required format.

        </div>

        <br/>

          

        <input type="number" name="position" min="0"

                value="0" max="470" />

          

        <button>Position Cursor</button>

    </center>

  

    <script>

        function setCursor(pos) {

            var tag = document.getElementById("editable");

              

            // Creates range object

            var setpos = document.createRange();

              

            // Creates object for selection

            var set = window.getSelection();

              

            // Set start position of range

            setpos.setStart(tag.childNodes[0], pos);

              

            // Collapse range within its boundary points

            // Returns boolean

            setpos.collapse(true);

              

            // Remove all ranges set

            set.removeAllRanges();

              

            // Add range with respect to range object.

            set.addRange(setpos);

              

            // Set cursor on focus

            tag.focus();

        }

      

        $('button').click(function() {

            var $pos = $("input[name='position']").val();

            setCursor($pos);

        });

    </script>

</body>

  

</html>

Выход:

  • Перед входом в позицию:
  • После ввода позиции:

Подход 2:

  • Сначала создайте Range и установите позицию, используя приведенный выше синтаксис.
  • При нажатии кнопки запускается функция возврата курсора на div.

Пример 2: Ниже приведен пример того, как установить курсор курсора на элементе редактирования содержимого.

<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="utf-8">

    <meta name="viewport"

        content="width=device-width, initial-scale=1">

          

    <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

    </script>

      

    <style>

        div {

            outline-color: red;

            caret-color: red;

            color: #ddd;

            width: 550px;

            text-align: justify;

            border: 2px solid red;

        }

    </style>

</head>

  

<body>

    <center>

        <h1 style="color:green;padding:13px;">

            GeeksforGeeeks

        </h1>

        <br>

  

        <div id="editable" contenteditable="true"

                    spellcheck="false">

            HTML stands for Hyper Text Markup Language.

            It is used to design web pages using markup

            language. HTML is the combination of Hypertext

            and Markup language. Hypertext defines the

            link between the web pages. Markup language

            is used to define the text document within

            tag which defines the structure of web pages. 

            HTML is a markup language which is used by

            the browser to manipulate text, images and

            other content to display it in required

            format.

        </div>

        <br/>

          

        <button>Position Cursor</button>

    </center>

      

    <script>

        function positionCursor() {

              

            var tag = document.getElementById("editable");

              

            // Creates range object

            var setpos = document.createRange();

              

            // Creates object for selection

            var set = window.getSelection();

              

            // Set start position of range

            setpos.setStart(tag.childNodes[0], 12);

              

            // Collapse range within its boundary points

            // Returns boolean

            setpos.collapse(true);

              

            // Remove all ranges set

            set.removeAllRanges();

              

            // Add range with respect to range object.

            set.addRange(setpos);

              

            // Set cursor on focus

            tag.focus();

        }

      

        $('button').click(function() {

            positionCursor();

        });

    </script>

</body>

  

</html>

Выход:

  • Прежде чем нажать кнопку:
  • После нажатия кнопки:

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Range

Рекомендуемые посты:

Как установить позицию курсора в редактируемом элементе контента с помощью JavaScript?

0.00 (0%) 0 votes