Hide button on form input

Hi teeboy4real,

Thanks for the compliment! 🙂

You can perhaps add a script on your footer.
The script will be an event listener that will look and see if the focus is on the input.

If the focus is on the input, it will change the opacity of Buttonizer to zero.
If the focus goes away from the input (blur), it will change the opacity back to a hundred.

Here’s a script that I made and tested:
The input I used had the class “search-field”.

<script>
	document.querySelector('.search-field').addEventListener('focus', () => {
		document.querySelector('.buttonizer').style.opacity = '0';
	});

	document.querySelector('.search-field').addEventListener('blur', () => {
		document.querySelector('.buttonizer').style.opacity = '100';
	});
</script> 

Let me know if you have any questions!

• This reply was modified 6 years, 9 months ago by Buttonizer.
• This reply was modified 6 years, 9 months ago by Buttonizer.
• This reply was modified 6 years, 9 months ago by Buttonizer.

Hi teeboy4real,

Here’s a newer script that should work on the latest version of Buttonizer.

You will need to change the “INPUT_HERE” into your text input’s class or id. ( Don’t forget to add a # for id and . for class )

Then you can simply copy and paste it into your site’s header or footer! 🙂

<script>

    // Run after Buttonizer is loaded
    function buttonizerInitialized() {

      // Hide Buttonizer when focus is on input
      document.querySelector("INPUT_HERE").addEventListener('focus', () => {
          document.querySelector('.buttonizer').style.opacity = '0';
      });

      // Show Buttonizer
      document.querySelector("INPUT_HERE").addEventListener('blur', () => {
          document.querySelector('.buttonizer').style.opacity = '100';
      });

    }
</script>

• This reply was modified 6 years, 4 months ago by Buttonizer.