Search code examples
javascripthtmlcsswebapp-net

onclick remove, html

I am working with webapp-net to build an application for iOS/android. in my app I have a form with some text fields. I want to have a "X" icon that usually appear on text fields when an input is entered. by clicking on that icon you can remove the whole input in just one click. The icon "X" appears only when an input is entered, when the textfield is empty the icon is not visible. If you could just give me an example of how to do it, I would really appreciate it.

Solution

  • this simple html shows how to have an input field and a X button that calls a clean function when pressed

    <input type="text" onkeypress="show();" id="text" /><div id="close" onclick="clean();" style="display:none">x</div>

    Now the javascript

    <script type="text/javascript">
   function show(){
      document.getElementById('close').style.display = ''; //shows the X button when text is entered;
   }

   function clean(){
      document.getElementById('close').style.display = 'none'; //hides the X button
      document.getElementById('text').value = ""; //clears the field
   }
</script>

    Of course this lacks validations like what type of key is pressed to avoid showing the X button when you press SHIFT or CTRL