Have an interesting issue when trying to save some input fields when a user clicks on the Save button. If a user clicks the save button as the next action after typing data the onblur action intercepts the onclick and does not trigger the save. However, if you add some padding (30px) and click above the word save it works but below the word Save it does not work, the same as with no padding. I'm certain users will go right from typing text in the input field then click Save which will fail unless they first click somewhere else and then click Save. I’ve provide html and javascript example below. Is there a way using javascript to solve this issue?
<html>
<script> function showstreet() { var x = document.getElementById('street').value; alert(x); } function focused() { document.getElementById('title').style.display=''; document.getElementById('street').value=''; } function blured() { document.getElementById('title').style.display='none'; if (document.getElementById('street').value == '') { document.getElementById('street').value='street'; } }
</script>
<style> .pad5 { padding:5px; } .pad30 { padding:30px; }
</style>
<body> <div id="title" class="pad5" style="display:none;">STREET NAME</div> <div> <input id="street" type="text" name="street" value="street" class="pad5" onfocus="focused()" onblur="blured()"> </div> <br> <div> <input type="button" value="Save" class="pad30" onclick="showstreet()"> </div>
</body>
</html>I converted this to jsfiddle but I'm not doing something right (newbie) https://jsfiddle.net/eyo63mav/26/