SHARE
TWEET

Untitled

Siri0n Aug 7th, 2018 (edited) 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.     .reset-button{
  8.       /*стилизуешь как тебе надо*/
  9.       color: white;
  10.       background-color: red;
  11.       border-radius: 50%;
  12.       height: 20px;
  13.       width: 20px;
  14.       cursor: pointer;
  15.       display: inline-block;
  16.       text-align: center;
  17.     }
  18.   </style>
  19. </head>
  20. <body>
  21.   <div class="input-wrapper">
  22.     <input type="text">
  23.     <span class="reset-button">x</span>
  24.   </div>
  25.   <script>
  26. function updateResetButton(e){
  27.   var resetButton = e.target.parentNode.querySelector(".reset-button");
  28.   resetButton.style.visibility = e.target.value ? "visible" : "hidden";
  29. }
  30.  
  31. function clearInput(e){
  32.   e.target.parentNode.querySelector("input").value = "";
  33.   e.target.style.visibility = "hidden";
  34. }
  35.  
  36. function connectResetButton(wrapper){
  37.   var resetButton = wrapper.querySelector(".reset-button");
  38.   var input = wrapper.querySelector("input");
  39.   resetButton.addEventListener("click", clearInput);
  40.   input.addEventListener("input", updateResetButton);
  41.   resetButton.style.visibility = input.value ? "visible" : "hidden";
  42. }
  43.  
  44. var wrapper = document.querySelector(".input-wrapper");
  45. connectResetButton(wrapper);
  46.  
  47.  
  48.   </script>
  49. </body>
  50. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top