Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Mark Libario
Mark Libario
9,003 Points

How can I clear an input text after "Enter" key?

Hey guys,

Im wondering whats the event when it comes to Enter key??

I wanted to do something that when I enter a value in an input text and press enter, the input area will clear and then the value entered will be assigned to a new variable.

So far, I only know how to clear it using buttons and just changing the textContent.

However, I dont want to use a button but a simple text input when I can just press enter and then it clears and the value gets assigned to a given variable/constant.

nico dev
nico dev
20,364 Points

Now that's an interesting question!

While I don't know if this answers 100% your question, at least I found them really interesting reads: this one, this one, and then this one shows it deeper, and does the same for all other keys.

Again, not sure if it works on your situation, but at least could be of help.

2 Answers

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

there's a submit event on forms you can listen for. you can also setup keyboard events for the enter key. then you can set the value of the input element to the empty string ''.

Mark Libario
Mark Libario
9,003 Points

how would that be in code?

So far the only event I know are 'click', mouseover, mouseout

element.addEventListener('event'; () => {
element.textContent =" ";
});