Question

I am developing my first jQuery plugin but want it to work in a slightly different manner to usual. I’ll start by explaining it’s purpose:

Very simple, <input> fields with a title attribute specified will fill the input box with the value in the attribute, focusing on the input field will remove the value and allow the user to type in the box.

I know this isn’t new stuff and probably done 100 times before but it’s more the learning curve than the final outcome.

So, I’ve got it so far working in two ways, first method is the code is called onto a particular element:

$('input').fillForm();

The other method involves using a selector within the plugin (specified as an option) which will find all elements on the page with a particular class and run the function:

$().fillForm(); // Called from the document load

$('.fillForm').each(function () {... // Within the plugin

My question is, is there a way to detect whether or not the user as specified a selector: $(‘input’).fillForm(); The bit highlighted in bold.

That way, if they haven’t then I can tell it to use the default css selector.

Here is a fiddle of my code: http://jsfiddle.net/chricholson/HwkRw/

There are two versions there, swap the comments around to try out the other method.

Answer 1

I’m not sure exactly what it is you’re after, but you can access the selector property of the constructed jQuery object like this:

console.log($("input").selector); // "input"

From within your plugin, you can do:

$.fn.myPlugin = function() {
    console.log(this.selector);
}

$("p").myPlugin(); // "p"