stackoom
  简体   繁体   中英

Clear button in input[text]

 原文  2017-03-21 12:44:07  3   4    javascript/ html/ css

Question

//May I have a very big problems in english, but I hope you'll understand.

In general, I tryed to use Marco's code, but I have a big problem with using an icon instead a text in button. I masked it, gave it a transparent background, deleted outline and borders. And it doesn't helped me. I solve it so: 

 $(".clearbutton").click(function(){ $(".clearable").val(""); });
 ::-webkit-input-placeholder { text-align: center; text-shadow: none; -webkit-text-fill-color: initial; } :-moz-placeholder { /* Firefox 18- */ text-align: center; text-shadow: none; -webkit-text-fill-color: initial } ::-moz-placeholder { /* Firefox 19+ */ text-align: center; text-shadow: none; -webkit-text-fill-color: initial } :-ms-input-placeholder { text-align: center; text-shadow: none; -webkit-text-fill-color: initial } input[type="text"] { background-image: linear-gradient(#FAFAFA, #F1F1F1); border-radius: 4px; border-width: 0.5px; border-color: #ABABAB; padding: 3px 6px; outline: none; border-style: solid; color: #ABABAB; text-shadow: 0px 0px 0px #000000; -webkit-text-fill-color: transparent; } input[type="text"]::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]::-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus::-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus:-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus:-ms-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} .uitextbox { display: table; } .clearbutton { outline: none; border: none; background: none; position: absolute; margin-right: 25px; margin-top: 2.5px; }
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="uitextbox"> <input class="clearable" type="text" placeholder="Search"/> <button class="clearbutton"><img src="icon.svg" width="15" height="15"></button> </div> </body> </html>

UPD: Wow, that's working. Okay, but my first problem it's a position of button. She's isn't inside a box. My second problem it's what button is visible when box value is empty. However, I think, I can solve it. My third problem it's a decoration. I know how to get element fading effect. But, I don't know, how to do that on a button and box's text. And my hands is growing up out of the wrong place. For some reason I can't use external js file and when I using script inside of the html file, then it's working. May there some problems with my workspace? ._.-.

This is how looks my code

.js file it's in the "js" folder, yeah

When I use external js file, it doesn't works. So I can't follow picture, just because I haven't so much reputation.

When I use js inside html, it works .

4 answers

solution1
 0  2017-03-21 12:50:08

The reset button and input need to be inside a form. Note that the reset button WILL reset the whole form. 

 <form> <input type="text" /> <button type="reset" value="reset">reset</button> </form>

solution2
 0  2017-03-21 12:51:04

If i'm right, you want the button to be inside the input field.

This way: 

 $("button").click(function(){ $(".clearable").val(""); });
 @import url('https://fonts.googleapis.com/css?family=Roboto'); html { font-family: 'Roboto', sans-serif; } ::-webkit-input-placeholder { text-align: center; text-shadow: none; -webkit-text-fill-color: initial; } :-moz-placeholder { /* Firefox 18- */ text-align: center; text-shadow: none; -webkit-text-fill-color: initial } ::-moz-placeholder { /* Firefox 19+ */ text-align: center; text-shadow: none; -webkit-text-fill-color: initial } :-ms-input-placeholder { text-align: center; text-shadow: none; -webkit-text-fill-color: initial } input[type="text"] { background-image: linear-gradient(#FAFAFA, #F1F1F1); border-radius: 4px; border-width: 0.5px; border-color: #ABABAB; padding: 3px 6px; outline: none; border-style: solid; color: #ABABAB; text-shadow: 0px 0px 0px #000000; -webkit-text-fill-color: transparent; } input[type="text"]::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]::-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus::-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus:-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus:-ms-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} div { display: table; } button { position: absolute; margin-left: -62px; margin-top: 1px; }
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div> <input class="clearable" type="text" placeholder="JUST TEXT BOX"/> <button>CLEAR</button> </div> </body> </html>

solution3
 0  2017-03-21 12:52:35

If you can't put it in a form as suggested by VilleKoo, you can also add a button to clear the value as below to clear the first input found of type text. 

 @import url('https://fonts.googleapis.com/css?family=Roboto'); html { font-family: 'Roboto', sans-serif; } ::-webkit-input-placeholder { text-align: center; text-shadow: none; -webkit-text-fill-color: initial; } :-moz-placeholder { /* Firefox 18- */ text-align: center; text-shadow: none; -webkit-text-fill-color: initial } ::-moz-placeholder { /* Firefox 19+ */ text-align: center; text-shadow: none; -webkit-text-fill-color: initial } :-ms-input-placeholder { text-align: center; text-shadow: none; -webkit-text-fill-color: initial } input[type="text"] { background-image: linear-gradient(#FAFAFA, #F1F1F1); border-radius: 4px; border-width: 0.5px; border-color: #ABABAB; padding: 3px 6px; outline: none; border-style: solid; color: #ABABAB; text-shadow: 0px 0px 0px #000000; -webkit-text-fill-color: transparent; } input[type="text"]::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]::-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus::-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus:-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;} input[type="text"]:focus:-ms-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <input id="asdf" class="clearable" type="text" placeholder="JUST TEXT BOX"/> <button value="clear" onclick='document.querySelectorAll("input[type=text]")[0].value=""'>Clear</button> </body> </html>

solution4
 0  2020-10-30 03:13:42

const handleMethod = (e) => {
  e.preventDefault();
  // clear input text
};
button.addEventListener(
  "touchstart",
  handleMethod,
  false
);
button.addEventListener(
  "mousedown",
  handleMethod,
  false
);

Like the above code, you can write a clear button yourself, and then combine the button with the input box

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question AngularJS, clear input text with button Clear input text on button click Clear text input and disable button onclick Angularjs Clear button in html text input box Button to clear text and reset search input not working react reset button clear text input area, javascript Set a reset button to clear a specific single input of type text AngularJs - Clear the entire text in a input textbox on pressing backspace button Showing a 'Clear Text' button after detecting the first character in an Input Box Datetime filter for AG-Grid - Clear input text on button click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM