突破鍵盤功能

Question

令人討厭的是，我已經進行了這項工作。 我剪下代碼整理一下...但是忘了在文本編輯器中保存粘貼的部分！

前提是：人們在文本區域中鍵入一條消息。 然后，他們單擊一個按鈕，該按鈕將調用一個函數，並打開一個div，其中顯示了修改后的消息。 但是...現在，我希望他們單擊​​鍵盤以再次隱藏它們（即，鍵盤觸發另一個功能）

我不能在body標簽中使用listener / addEvent，因為它們也在輸入textarea的詳細信息。 不要認為它對函數有什么好處，因為一旦修改了文本，它就會立即返回。 我= 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>