I looked around for a good input text replacement plugin for jQuery but couldn’t find anything that did what I wanted so I created one myself. Learn how to use the plugin in this post.

I just released a new jQuery plugin on Google Code called jquery-input-replacement:

http://code.google.com/p/jquery-input-replacement/

The code performs a simple but useful function that I seem to always need so I decided to create a plugin that I (and others) could reuse.

Basically, the code replaces blank HTML form inputs with a string of text that is used to supply default values into the field. This is primarily used to give a field a default value, such as search fields. Below is a short little video showing what it does:

The plugin lets you define the field (or fields) that you want to apply the text to and (optionally) the CSS class to apply to the input when the text is applied to it.

When a user clicks on the field (when it gains “focus”), the CSS class gets removed and so does the initial text, allowing the user to enter in their content.

This can be used for search fields, login forms, and a number of other applications.

I hope the code is useful to someone out there and if you use it or have questions, feel free to post a comment or submit a bug to Google Code.

I have come into the need lately of solid show/hide plugin for jQuery and couldn’t find anything out there that suited my needs so I created on myself. Learn how to use it in this tutorial.

So I’ve created another jQuery plugin recently called jquery-showhide:

http://code.google.com/p/jquery-showhide/

Overview

jquery-showhide is a more robust “toggle” function that allows you to do a few cool things that the default jQuery .toggle() function does not. Please check out the video below to see an example usage of the plugin:

This video shows you what you can do with the plugin, including using the “autofocus” feature.

Features

First off, you can toggle the text of the toggle object to whatever you want. For example, if you have a hidden “categories” table, you can have the toggle link say “Show categories” and after it is clicked and the categories table is shown, you can have it say “Hide categories”.

Another useful thing is “autofocusing” which lets you define a field within your hidden object to autofocus when showing it. This is useful if you have a hidden form that you want a user to be able to type in as soon as it is visible, rather than having to click on the field manually. I’ve been using this on some personal projects and it really does make things much quicker.

Since jquery-showhide is completely “class” based (it uses classes to show/hide objects, rather than applying style="dispaly: none"/style="display: block"), it is a little more robust, especially if you would like to do more than just show/hide a field (such as changing it’s display or size).

Using

If you want to use the plugin, go to http://code.google.com/p/jquery-showhide/ and download the latest release and view the demo/demo.html file to see how to use it. Also check out the notes on the Google Code page for more info.

I hope you enjoy the feature and if you need to get in touch with me or find a bug, please leave a comment or submit a bug to Google Code.

I often find the need to add a confirmation to a delete link in my applications. Below is a very simple way to achieve this with jQuery.

First, you’ll need a link that you will be clicking where you want the confirmation box to pop-up.

<p><a href="/some/path/to/delete" class="delete">Delete</a></p>

<script type="text/javascript">
    $(function() {
        $('.delete').click(function() {
            return confirm("Delete this item?");
        });
    });
</script>

Well, that’s it. Nothing special, but comes in handy once and a while.

Note: Thanks to Brian for his suggestion!