input field clear button causing blur event - how to avoid

Question

I'm building a form field with a "clear value" button - like on iOS there's a little "X" icon you can tap to clear your search string.

My problem is: I use the field's blur event to do error checks on the input format, and my implementation of the "X" icon always triggers the blur event.

I'm stumped: if I place the icon as a background image in the input field, I no longer have a click target, and if I use a standard div or img layered on top of the field, of course the blur triggers.

I'm using jQuery but this might be a generic CSS/javascript issue.

for example the accepted solution here: Clear icon inside input text that's a fine example of the original intent but this also will trigger the blur event as soon as you attach one.

UPDATE: It seems like the best way is to use the error checking function - but I don't like it so I kept looking... turns out I was unaware of the contenteditable attribute in HTML5.

Aside from the obvious accessibility concerns over not using form fields for form data, and forgetting about oldfashioned browsers that can't do HTML5, any reason why NOT to recreate input fields with contenteditable div tags?

blur fires because you remove focus when you click on the button, what do you expect? — epascarello, Mar 25 '13 at 17:55
If you use a background image, you still have a click target...it's just not ideal to use. You'd have to find out where the input was clicked, and if it was within the certain boundary (where the "clear" button is located), then clear the text. Otherwise, it was a normal click — Ian, Mar 25 '13 at 17:58

score 5 · Accepted Answer · answered Mar 25 '13 at 18:07

Instead of trying to avoid the blur event, why don't you just exclude this case (X click) from your input validation function? There are a couple of ways that you could do this, for example, on hover you can have a var doExclude set to true. In you validation function, when the blur event fires, it can first check this before the rest of the function:

if (exclude) return;

After the X is done you can return focus to your input if you want $('input').focus();

score 1 · Answer 2 · answered Mar 25 '13 at 18:06

1

many options here

You may change trigger to validate on 'keyup' or check error on 'submit'
use jquery validate plugins
in the $('#X-icon').click(fn) you can clear/hide error message as well. so user will not see error message.

answered Mar 25 '13 at 18:06

aifarfa

3,939
2
23
35

score 1 · Answer 3 · edited May 23 '17 at 12:28

Something that's hacky and may not be preferred, is that you use setTimeout in the blur event, so that you delay the code from running 100ms (or however long). Within 100ms, the "clear" button should've been clicked. If it wasn't, then run your normal error checks/formatting. If it has been clicked, clear the input's text and don't do the normal blur event.

Here's an example, using the styling from the link you posted ( Clear icon inside input text ):

$(document).ready(function() {
    var clearTextTimeout;

    $("#data_field").on("blur", function () {
        var $that = $(this);
        clearTextTimeout = setTimeout(function () {
            console.log("would be error checking and formatting text");            
        }, 100);
    });

    $("#data_field_clear").on("click", function () {
        clearTimeout(clearTextTimeout);
        console.log("clearing text");
        $("#data_field").val("");
    });
});

http://jsfiddle.net/37Pxw/

Watch your browser's console and you'll see that the error checking/formatting only runs when you don't click the "clear" button". It might be safe to reduce the number to 50 instead of 100.

This works because the "clear" button's click event will run immediately after the input's blur event, so it's safe enough to assume if the click event didn't run within 100ms (50) of the input's blur event, it wasn't clicked.

score 0 · Answer 4 · answered Mar 25 '13 at 19:33

I'm solving my problem like this (I dislike input tags a lot):

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(function(){

$('div[contenteditable]').on('blur', function(){
alert('d');
});
$('div[contenteditable] > img').on('click', function(){
$(this).parent().text('');
});

});
</script>
<style>
div[contenteditable] { border:1px solid #009; position:relative;}
img {position:absolute; top:2px; right:2px; cursor: pointer;}
</style>
<body>

<div contenteditable="true">default value<img src="/" width="10" height="10" /></div>

</body>
</html>

input field clear button causing blur event - how to avoid

4 Answers4