Detect if a selector has been specified

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 pa开发者_StackOverflow中文版rticular 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.

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"

Create a method on the root jQuery object (instead of in the fn namespace) which can be called without a selector.

(function($) {
    var defaultSelector = '.fillForm';

    // Use fillForm with your own selector.
    $.fn.fillForm = function() {
        // Blah blah blah.
    };

    // Use fillForm with the default selector.
    $.fillForm = function() {
        $(defaultSelector).fillForm();
    };
})(jQuery);

Now you can call your plugin with $.fillForm() which is a more common pattern.

A perhaps better approach to what you are trying to do: Have a default setting and overwrite it when needed:

(function ($) {
    $.fillForm = function (args) {

        var options = {
            selector : '.fillForm'
        }

        $.extend(options, args);

        alert(options.selector);

        $(options.selector).each(function () {
            var input = $(this);

            input.val(input.attr('title'));

            input.focus(function () {
                if (input.val() == input.attr('title')) {
                    input.val('');
                } else {
                    setTimeout(function () { input.select(); }, 10);
                }
            });

            input.blur(function () {
                if (input.val() == "") {
                    input.val(input.attr('title'));
                }
            });
        });

    };
})(jQuery);

$(document).ready(function () {

    $.fillForm({'selector' : '.foo'});

});

Working example here: http://jsfiddle.net/82t3K/

Why not use the standard "placeholder" attribute and write a fallback that utilizes it? Or better yet, use one of the many fallbacks already written? Every answer posted so far has given varying degrees of really bad advice.

For your task, I recommend using the html placeholder fallback written by Mike Taylor (from Opera): jQuery-html5-placeholder . Or at very least, use his work to inspire your own.

The jQuery object has a .selector property that you can use. Here is an example, http://jsfiddle.net/Akkuma/CGFpC/

If you create an empty jQuery object $().selector; will equal an empty string. If you decided to turn this into a jQuery UI Widget you can't access it simply from this.element.selector.