При выделении текста с помощью js с ним ничего нельзя сделать

Question

В моём мини проекте есть небольшой функционал: при нажатии на кнопку создаётся объект, и я этот объект уже перетаскиваю куда нужно, захотелось добавить функционал, чтобы быстрее создавать объекты с другим текстом, при нажатии на блок input - выделять весь текст, я это сделал, текст выделяется, но вот потом я с ним ничего не могу сделать не стереть, не дописать, ничего

//функционал, про который я писал - в самом низу
function dragDrop() {
    const elems = document.querySelectorAll(".element");
    const days = document.querySelectorAll(".day__body");
    elems.forEach((elem) => {
        elem.addEventListener('dragstart', dragStart);
        elem.addEventListener('dragend', dragEnd);
        elem.addEventListener('dblclick', function (event) {
            window.navigator.clipboard.writeText(event.target.textContent);
        });
    });

    function dragStart(event) {
        event.dataTransfer.setData("id", this.id);
        setTimeout(() => {
            this.classList.add('hide');
        }, 0);
    };

    function dragEnd() {
        this.classList.remove('hide');
    };

    days.forEach((day) => {
        day.ondragover = function (e) {
            e.preventDefault();
        };

        day.ondrop = function (event) {
            let id = event.dataTransfer.getData("id");
            if (id) {
                this.append(document.getElementById(id));
                this.classList.remove('hovered');
            }
        };

        day.ondragenter = function () {
            this.classList.add('hovered');
        };

        day.ondragleave = function (event) {
            event.preventDefault();
            this.classList.remove('hovered');
        };
    });
};


const btn = document.querySelector("button");
const place = document.querySelector(".place-for-element");
const data = document.querySelector(".item");
const form = document.querySelector(".form");
let count = 1;

dragDrop();
form.addEventListener('submit', function (event) {
    event.preventDefault();
    place.innerHTML = `<div class="element" draggable="true" id="${count}">${data.value}</div>`;
    count += 1;
    dragDrop();
});

//Тот самый функционал с выделением
data.addEventListener('click', function () {
    if (data.value) {
        let rng = document.createRange();
        rng.selectNode(data)
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(rng);
    }
})

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 400;
}

.wrapper {
  min-height: 100vh;
  overflow: hidden;
}

.element {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background-color: #89daec;
  padding: 15px 5px;
  width: 95%;
  cursor: all-scroll;
  height: 15%;
  border-radius: 15px;
}

.hide {
  display: none;
}

.hovered {
  background-color: rgba(255, 255, 255, 0.752);
}

.create-item {
  max-width: 30.2%;
  margin: 0 auto;
  height: 200px;
}

.item {
  padding: 10px 5px;
  width: 100%;
  font-size: 16px;
  color: black;
  font-weight: 700;
  border: 2px solid black;
  border-radius: 15px;
  margin: 0px 0px 10px 0px;
}

button {
  padding: 10px 5px;
  border-radius: 15px;
  background-color: #0747a6;
  color: white;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  margin: 0px 0px 10px 0px;
}

<body>
    <div class="wrapper">
        <div class="create-item">
            <form action="" class="form">
                <input type="text" class="item" placeholder="Введите задачу">
                <button type="submit">Создать</button>
            </form>
            <div class="place-for-element"></div>
        </div>
    </div>
    <script src="/js/script.js"></script>
</body>

Answer 1

может подойдет такой вариант ??? ссылка на мдн

const data = document.querySelector(".item");

data.addEventListener('click', function() {
  if (data.value) {
    data.select()
  }
})

<input type="text" class="item" placeholder="Введите задачу">

БЛОГ НА HUSL

При выделении текста с помощью js с ним ничего нельзя сделать

Ответы (1 шт):