突破键盘功能

Question

The annoying thing is, I had this working. I cut out the code to tidy up ... but forgot to save the pasted section in text editor !!

The premise is this: People type a message into a textarea. They then click a button, which calls a function, and opens a div that displays that modified message. But ... I now want them to click the keyboard for the to get hidden again, (ie the keyboard triggers another function)

I can't use a listener / addEvent in the body tag since they are also entering detail for textarea. Don't think it would be any good in the function as that returns as soon as it's modified the text. I =THINK= I need a loop at the latter end of function so that it keeps repolling the addEvent or similar.

Or other suggestions?

Answer 1

I think this is what you are asking for. If the user starts typing agin it will hide the preview div. However, it might just be better to have an 'active' preview that evolves as they type.

 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> 

This is a live type version of above, as the user types, we can preview output.

 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>