DEV Community

loading...
Cover image for Amazing Clear Input Using HTML & JS

Amazing Clear Input Using HTML & JS

Nikhil Bobade
I am Frontend Developer, currently living in Mumbai, India. My interests range from technology to design. Currently learning MEAN and Data Structure.
・1 min read

Hello

Today I created a Amazing Clear Input with HTML & JS. This is simple placeholder input I use JavaScript to clear input you can be also add a wipe animation to make more professional clear input. I hope you like this also comments about your thoughts.

For more content follow me on Instagram @developer_nikhil27.

Thank you!

Discussion (21)

Collapse
kylesureline profile image
Kyle Scheuerlein

Did you know there is an <input type=“search” /> for stuff like this? I think it even has decent browser support.

Collapse
shagshag profile image
Georges Cubas • Edited

Hello,

type="search" is for search, not for the ability to clean the input. Using it for an username, except if it's for search an username, is not a good practice. This could involve side effects in the future. Moreover Firefox Desktop doesn't seem to display the cross.

To OP, you have an error in your HTML : type=“search" the first quotes are invalid, curly quotes instead of straight quotes

Collapse
kylesureline profile image
Kyle Scheuerlein

Good point! I think you’re right.

Collapse
nikhil27b profile image
Nikhil Bobade Author

I actually first using simple type="text" but kyle suggest me to use type="search"

Collapse
nikhil27b profile image
Nikhil Bobade Author

Yes I know about that but I forgot to use 😅 and i use some of code from my previous post

Collapse
kylesureline profile image
Kyle Scheuerlein

Well, as with everything... it has trade offs.

With your approach you get full control over the design of the “x”, but it requires JS and you need to use care to make sure it remains accessible.

With <input type=“search” /> you can’t change the look of the “x”, but it will match their OS, which could be desirable! It also won’t require JS to function and should be accessible.

Thread Thread
nikhil27b profile image
Nikhil Bobade Author

I updated my code 😃

Collapse
dillonheadley profile image
Dillon Headley

If this was in a form element the x could actually be a button or input with type=“reset” which clears the inputs of a form natively and is accessible by default. No need to build that part yourself in js.

developer.mozilla.org/en-US/docs/W...

Collapse
nikhil27b profile image
Nikhil Bobade Author

But reset is use for full form or input what if you only want to use for certain field

Collapse
dillonheadley profile image
Dillon Headley

That’s a good point! In that case what you demonstrated would be the way to go 😄

Thread Thread
nikhil27b profile image
Nikhil Bobade Author

There are many ways but I written a beginner friendly

Collapse
iamcertainlyhappytoday profile image
james monteith

But what does this search for? I would like to be able to search inside a page I had online of my own making so this sounds goods yet I do not no the parameters from this code of what or where is looks or reveals the answer.
Mention is made of beginners just doing a copy and paste but to me this is just a box that looks like it should do something but no explanation of what it does more than the very large promise of search de facto owt.

Collapse
nikhil27b profile image
Nikhil Bobade Author

Hey I understand but now I explain the codes in my new post and this post is only have a clear functionality with HTML and javascript so if user want to clear the input so with that button user can clear the input

Collapse
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com

img class could be more meaningful as that’s not an image so could be cross or icon or something more meaningful

JS need some optimisation as it’s targeting body, it should target form and some more JS logics can be improved

I know you are just sharing the idea, idea is good. Think of beginners who are just gonna copy paste your code.

Collapse
nikhil27b profile image
Nikhil Bobade Author

Thanks I take care of that from next post

Collapse
adam_cyclones profile image
Adam Crockett

Here's another tip:

document.querySelector(".username").value = ''
Enter fullscreen mode Exit fullscreen mode

Nah just do this ☺️

document.querySelector(".username").clear();
Enter fullscreen mode Exit fullscreen mode
Collapse
amircahyadi profile image
Amir-cahyadi

Nice ❤️

Collapse
nikhil27b profile image
Nikhil Bobade Author

Thank you 😊

Collapse
amircahyadi profile image
Amir-cahyadi

👍

Collapse
adam_cyclones profile image
Adam Crockett

Here's a nice tip, because .length 0 or -1 are falsey, you don't need to check if less than or equal to 0, just if truethy or falsely

Collapse
nikhil27b profile image
Nikhil Bobade Author

Thank you 😊 Very nice tips