Как вставить курсор в добавленный блок?
делай так, но курсор не вставляется
snippet
<div id="t" contenteditable="true"> <div>1</div> <div>2</div> <div>3</div> </div> <div onclick="s()">Button</div> |
<div id="t" contenteditable="true"> <div>1</div> <div>2</div> <div>3</div> </div> <div onclick="s()">Button</div>
function s(){ document.getElementById('t').innerHTML += "<div><br></div>"; var newDiv = editableDiv.lastElementChild; newDiv.focus(); } |
function s(){ document.getElementById('t').innerHTML += "<div><br></div>"; var newDiv = editableDiv.lastElementChild; newDiv.focus(); }
Дополнительно:
нашел ответ. Если кому надо:
function s() { var editableDiv = document.getElementById('t'); // Создаем новый элемент div var newDiv = document.createElement('div'); // Вставляем внутренний контент, в данном случае <br> newDiv.innerHTML = '<br>'; // Добавляем новый div в родительский элемент editableDiv.appendChild(newDiv); // Устанавливаем курсор в новый div var range = document.createRange(); var selection = window.getSelection(); range.setStart(newDiv, 0); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); newDiv.focus(); } |
function s() { var editableDiv = document.getElementById('t'); // Создаем новый элемент div var newDiv = document.createElement('div'); // Вставляем внутренний контент, в данном случае <br> newDiv.innerHTML = '<br>'; // Добавляем новый div в родительский элемент editableDiv.appendChild(newDiv); // Устанавливаем курсор в новый div var range = document.createRange(); var selection = window.getSelection(); range.setStart(newDiv, 0); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); newDiv.focus(); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для вставки курсора в добавленный блок можно использовать CSS свойство `caret-color`. Это свойство позволяет установить цвет курсора в текстовых полях и других элементах, где курсор отображается.
Пример использования:
.custom-cursor { caret-color: red; /* устанавливаем красный цвет для курсора */ } <div class="custom-cursor">Нажмите сюда, чтобы вставить курсор</div>.custom-cursor { caret-color: red; /* устанавливаем красный цвет для курсора */ } <div class="custom-cursor">Нажмите сюда, чтобы вставить курсор</div>
В данном примере мы создали блок с атрибутом `contenteditable="true"`, который позволяет редактировать содержимое этого блока. Для этого блока установили красный цвет курсора с помощью CSS свойства `caret-color`.
Теперь, когда пользователь нажмет на этот блок, курсор будет отображаться красным цветом. Вы можете изменить цвет курсора на любой другой, установив нужное значение в свойстве `caret-color`.
Надеюсь, данное решение поможет вам вставить курсор в добавленный блок. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.