Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


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
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,258 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 =" ";