theonlychase
3/1/2018 - 8:25 PM

Clear Input Value on click

Clicking inside of the input, the value attribute will clear. When you click anywhere outside of the input, the default value will reappear.

<!-- Two functions to add to the input -->
<script>
// If value is blank, the value becomes the "default" value, which in this case, is "Email"
  function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}
// If you click inside the input, the default value clears, and the value becomes what is typed into the input box
function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}
</script>

<!-- Form -->
<form method="post" v65js="emailSubscribe">
    <input name="contactType" value="Newsletter" type="hidden">
    <input name="email" value="Email" type="text" onblur="onBlur(this)" onfocus="onFocus(this)">
    <button type="submit" class="defaultBtn">
        <span>Subscribe</span>
    </button>
</form>