Joe Sak

Awesome dude, Just what I was looking for!

How can we clear a input FILE field using javascript or jquery.
<input type=”file

F**king sick Joe. Snooks sent me your way. Literally nothing like this I could find on the internet (I’ve spent an hour looking).

Awesome job mate,
L

Hi Joe, thanks for that nice script – exactly what I need. Unfortunately it does not work in my application, since this is not executed after loading the site:

$(document).ready = autoFill($(“#txtSearch”), “Enter Search Keyword(s)”);

Although when executing it in Firebug it works as expected. Before that I make some other calls like window.onload etc.

Any idea?

Roman

Sorry for bugging, I found the problem … I have to use
$(document).ready(function() {
autoFill($(“#txtSearch”), “Enter Search Keyword(s)”);
});

Anyway, thanks for your script!

Looks good, man. Glad it’s working for you :)

Found your tutorial via google. This is working perfectly for me right now. However, I’d like to add it to a different site and use it on multiple fields within the same form. Unfortunately my jquery kungfu is minimal and I don’t know how to proceed in that direction.

Is it possible? if so, how would I go about that?

Thank you.

Really great post man. Good written and explained. Will use that function of yours for ever probably :p. Thanks for sharing!

Make it a jQuery plugin!

@sean-

Simply add this line to your JS file for each field you want to use:

autofill(‘#field_id’,'Value’);

@sean-

Now that this script is a plugin, call it like so:

$(‘#field_id’).autofill({ value: ‘Default value’ });

for each form field.

You can now customize the default & active text colors by setting them in the function call:

$(‘#field_id’).autofill({
value: ‘Default value’,
defaultTextColor: ‘#f00′,
activeTextColor: ‘#000′
});

Thanks, will try that out in the next couple of days.

Thanks, just the ticket!
*subscribed*

[...] been getting awesome responses on my autofill jquery plugin and I really appreciate all of it. I’d like to share some more of the things I’ve built [...]

[...] A jQuery Function to Auto-Fill Input Fields and Clear them on Click – Joe SakIn addition to guiding you through the JavaScript necessary to make this work, Joe has also written a jQuery plugin to do the work for you. [...]

Hey Joe i think what you have done is awesome, i really like it and easy to work with, the problem though that i’m having is that this is not working in IE. Is there some kind of disclaimer that i missed that said this wont work on IE. I keep getting an error of “this object does not support this property or method”…gosh I HATE IE with a passion. When i try loading this page http://www.joesak.com/uploads/demo/autofill.html in IE, I get the same error. any way you can help out would be greatly appreciated. Thanks.

@antonio-

Thank you for your comment. I caught a typo in the plugin that was breaking down in IE6. That’s what I get for abandoning IE6 in my testing phase! :-P

Thanks, everything is updated now.

dude you are awesome, thanks for the fix. out of curiosity, you think you will ever add support for password input fields…..I dont really need it, since i created a work around, but it would be pretty sweet if there was functionality for that.

Oh dude it works but it will show asterisks. you can modify it to change the input type attribute if you want it to switch between password and plain text. I’ll add that feature later when I’m not at the bar ;)

Thanks for the feedback!

I have been using a different implementation which is far easier (60% somebody’s elses code which wasn’t working for me): Add a title element to all input fields with the autotext, add two css classes (defaultText and defaultTextActive) and you’re finished. Probably a lot easier then this implementation.

[css]
.defaultText { color: #a1a1a1; }
.defaultTextActive { color: black;}
[/css]
[jquery]
$(“.defaultText”).focus(function(srcc)
{
if ($(this).val() == $(this)[0].title)
{
$(this).addClass(“defaultTextActive”).removeClass(“defaultText”);
$(this).val(“”);
}
});

$(“.defaultText”).blur(function()
{
if ($(this).val() == “”)
{
$(this).removeClass(“defaultTextActive”).addClass(“defaultText”);
$(this).val($(this)[0].title);
}
});
[/jquery]

And if you would want it to work with a password field, first create a normal textfield, but simply add a .attr(“type”,”password”) to the focus and a .attr(“type”,”text”) to the blur (not tested, but should work without a problem)

Owesome man…..

Hi Joe – this is great.

I’m a bit of a weekend bodger with jQuery (rolls eyes).

Is there an easy way to get this to work for textareas – they don’t use value for default content…

Cheers.

Hey, I figured out a better way, meaning you don’t have to pass the value all the time for specific inputs, just use the rel attribute.
So the input element is like:
The script is like this:
$(‘input’).focus(function() {
if($(this).val() == $(this).attr(‘rel’)) {
$(this).val(“”);
}
}).blur(function() {
if($(this).val() == “”) {
$(this).val($(this).attr(‘rel’));
}
});

I find this much handier to maintain than a separate plugin, but cheers for the idea!

damn cms blocked my input, but it should be like {input type=”text” rel=”NAME” value=”NAME” /}

To add on to Aaron Mc Adam you could add a .blur() to the end of the chain which would fire the blur event on each input element and you would then only need to add the rel attribute for each input instead of the rel and the value.

Hi Joe,

How would you go about modifying this to work on a password field?

you are fckin awesome man! brilliant stuff, way to go dude.

I hope you guys get this. I updated the plugin to have automatic support for password fields. Just use it like normal on your password field and you’re golden!

Thank you so much.. awesome stuff.. its just what i was looking for..