События при фокусе на элементе с contenteditable
Привет, есть элемент:
<div class="editor" contenteditable="true" placeholder="Начните писать..."></div> Как при фокусе создать параграф и переместить фокус на него? Делаю что-то вроде этого:
editor.addEventListener( 'focus', function() {
if( editor.innerHTML == '' ) {
editor.innerHTML = '<p></p>';
}
} );
Но фокусировка всё равно перед тегом p. |
Янковиц,
const editor = document.querySelector('.editor');
editor.addEventListener( 'focus', function() {
if( editor.innerHTML == '' ) {
editor.innerHTML = '<p></p>';
editor.querySelector('p').focus()
}
} );
|
Спасибо, я наверно не так выразился. Скорее нужно не фокус, а курсор перенести.
|
Цитата:
Попробуйте так
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>TEST</title>
<style>
.editor {
width: 300px;
min-height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body >
<div class="editor" contenteditable="true" placeholder="Начните писать..."></div>
<script>
let editor = document.querySelector('.editor')
editor.addEventListener( 'focus', function() {
if( editor.children.length == 0 ) {
editor.innerHTML = '<p style="min-height:10px;margin-left:3px;"></p>';
editor.querySelector('p').focus()
}
} );
</script>
</body>
</html>
|
Спасибо, действительно. Неожиданное поведение.
|
Янковиц,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div[contenteditable] > p{
border: 1px solid red;
min-height: 1em;
background-color: #FFFFFF;
margin: 4px 2px;
}
div[contenteditable]:focus {
outline: none;
}
div[contenteditable]{
background-color: #CCCCFF;
padding: 1px 4px;
}
div[contenteditable]:empty:before {
content:attr(placeholder);
color:gray
}
</style>
</head>
<body>
<div class="editor" contenteditable="true" placeholder="Кликните и начните писать..."></div>
<script>
const editor = document.querySelector('.editor');
editor.addEventListener( 'focus', function() {
if( editor.innerHTML == '' ) {
editor.innerHTML = '<p></p>';
editor.querySelector('p').focus()
}
} );
</script>
</body>
</html>
|
Цитата:
Попробуйте нажимать enter при вводе. Каждая строка будет оформляться в виде отдельного параграфа внутри div. Не <br> ставит внутри <p>, а новый <p> создает. |
| Часовой пояс GMT +3, время: 18:59. |