o3ProtectedInput.js — JQuery Plugin to Protect Inputs

Today we are releasing a JQuery plugin we have written under an open source license (MIT). It is a small plugin that makes an input harder to edit. Although this may seem counter productive, it is acctually quite useful for forms where you don’t normally change certain fields. Consider a form that allows you to edit a product. Chances are you will never change the serial number of the product, but you want to allow the user to change it just in case something was mistyped the first time. This plugin allows you to do just that. It prevents you from accidentally modifying it, but still makes it easy to change. It will also prevent an input from being “tabbed” to.

Here is a demo:

Protected Select:

Code:


$(document).ready(function(){

    $('.protectedInput').o3ProtectedInput({

        backgroundImage: 'http://common.ozonesolutions.com/images/stripe.png'

    });

});

If all you want to do is prevent a user from changing a field, you can use the “readonly” attribute. However, this plugin is great for situations where you want something to start readonly, but still be editable if the user is sure they want to change it.

Downloads

If you want to use this plugin, you can download it here:
O3 Protected Input Download — complete bundle (.tar.gz)
O3 Protected Input Download — complete bundle (.zip)
O3 Protected Input Download — javascript only (does not include stylesheets or images. Functional but less pretty)
GitHub Page (for developers)


This entry was posted in JavaScript, jQuery, Plugin, Uncategorized and tagged , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>