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?
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?
Share Improve this question edited May 23, 2017 at 11:49 CommunityBot 11 silver badge asked Mar 25, 2013 at 17:45 timtim 3,9135 gold badges36 silver badges39 bronze badges 2- 1 blur fires because you remove focus when you click on the button, what do you expect? – epascarello Commented Mar 25, 2013 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 Commented Mar 25, 2013 at 17:58
4 Answers
Reset to default 5Instead 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();
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.
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/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.
I'm solving my problem like this (I dislike input tags a lot):
<!DOCTYPE html>
<html>
<script src="http://code.jquery./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>