Вырваться из функции с клавиатуры

Question

Раздражает то, что у меня это работало. Я вырезал код, чтобы привести в порядок ... но забыл сохранить вставленный раздел в текстовом редакторе !!

Предпосылка заключается в следующем: люди вводят сообщение в текстовую область. Затем они нажимают кнопку, которая вызывает функцию, и открывает div, который отображает это измененное сообщение. Но ... теперь я хочу, чтобы они снова щелкнули по клавиатуре, чтобы снова скрыться (т. Е. Клавиатура вызывает другую функцию)

Я не могу использовать listener / addEvent в теге body, так как они также вводят детали для textarea. Не думайте, что это было бы хорошо для функции, так как она возвращается, как только она изменила текст. I = THINK = Мне нужен цикл на последнем конце функции, чтобы он продолжал повторять addEvent или подобное.

Или другие предложения?

Answer 1

Я думаю, это то, что вы просите.Если пользователь начинает вводить agin, он скрывает предварительный просмотр div.Однако, может быть, лучше иметь «активный» предварительный просмотр, который развивается по мере их ввода.

const previewDiv = () => document.querySelector('#preview');
const textArea = () => document.querySelector('input[type="textarea"]');
const preview = () => document.querySelector('button');

document.addEventListener('DOMContentLoaded', () => {
  textArea().addEventListener('keydown', () => previewDiv().setAttribute('class', 'hide'));
  preview().addEventListener('click', () => {
    console.log('test');
    previewDiv().setAttribute('class', 'show');
    console.log(previewDiv());    
    previewDiv().innerHTML = textArea().value;
  });
});

#preview {
  border: 1px solid black;
  padding: 10px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<input type="textarea" />
<button>Preview</button>
<div id="preview" class="hide"></div>

Это версия живого типа выше, поскольку пользовательские типы, мы можем предварительно просмотреть вывод.

const previewDiv = () => document.querySelector('#preview');
const textArea = () => document.querySelector('input[type="textarea"]');


document.addEventListener('DOMContentLoaded', () => {
  textArea().addEventListener('keyup', () => {
    previewDiv().innerHTML = textArea().value;
  });
});

#preview {
  border: 1px solid black;
  padding: 10px;
}

<input type="textarea" />

<div id="preview"></div>