Форум

Янковиц · #1 (**permalink**) 15.10.2020, 17:30

Привет, есть элемент:

<div class="editor" contenteditable="true" placeholder="Начните писать..."></div>

Как при фокусе создать параграф и переместить фокус на него?
Делаю что-то вроде этого:

editor.addEventListener( 'focus',  function() {
	if( editor.innerHTML == '' ) {
		editor.innerHTML = '<p></p>';
	}
} );

Но фокусировка всё равно перед тегом p.

рони · #2 (**permalink**) 15.10.2020, 18:15

Янковиц,

const editor = document.querySelector('.editor');
editor.addEventListener( 'focus',  function() {
	if( editor.innerHTML == '' ) {
		editor.innerHTML = '<p></p>';
        editor.querySelector('p').focus()
	}
} );

Янковиц · #3 (**permalink**) 16.10.2020, 09:22

Спасибо, я наверно не так выразился. Скорее нужно не фокус, а курсор перенести.

voraa · #4 (**permalink**) 16.10.2020, 09:34

Сообщение от Янковиц

Спасибо, я наверно не так выразился. Скорее нужно не фокус, а курсор перенести.

Не получается навести курсор на элемент с нулевой высотой. Когда пустой p прижат к левому краю, курсор тоже не виден из-за обводки фокуса
Попробуйте так

<!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>

Янковиц · #5 (**permalink**) 16.10.2020, 09:57

Спасибо, действительно. Неожиданное поведение.

рони · #6 (**permalink**) 16.10.2020, 10:02

Янковиц,

<!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>

voraa · #7 (**permalink**) 16.10.2020, 10:09

Сообщение от Янковиц

Спасибо, действительно. Неожиданное поведение.

Там еще более неожиданное поведение.
Попробуйте нажимать enter при вводе.
Каждая строка будет оформляться в виде отдельного параграфа внутри div. Не <br> ставит внутри <p>, а новый <p> создает.

Форум

Справочник

Discord чат

Курсы javascript