Set/Clear Default Input Value

very old snippet from CSS-tricks:

$(‘.default-value’).each(function() { var default_value = this.value; $(this).focus(function(){ if(this.value == default_value) { this.value = ”; } }); $(this).blur(function(){ if(this.value == ”) { this.value = default_value; } }); });

clear textbox after form submit

Add an id for the textarea.

<textarea name='comment' id='comment'></textarea>

Hook into the submit process and add:

$('#comment').val('');

 input placeholder attribute

adding HTML5 placeholder behavior to the browsers that don’t support it. We are going to use a jQuery plugin by Mathias Bynens. Check out the GitHub repo for details.

Use the plugin as follows:

$('input, textarea').placeholder();

You’ll still be able to use jQuery#val() to get and set the input values. If the element is currently showing a placeholder, .val()will return an empty string instead of the placeholder text, just like it does in browsers with a native @placeholder implementation. Calling .val('') to set an element’s value to the empty string will result in the placeholder text (re)appearing.

CSS

The plugin automatically adds class="placeholder" to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:

input, textarea { color: #000; }
.placeholder { color: #aaa; }
  • Automatically checks if the browser natively supports the HTML5 placeholder attribute for input and textarea elements. If this is the case, the plugin won’t do anything. If @placeholder is only supported for input elements, the plugin will leave those alone and apply to textareas exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)
  • Caches the results of its two feature tests in jQuery.fn.placeholder.input and jQuery.fn.placeholder.textarea. For example, if @placeholder is natively supported for input elements, jQuery.fn.placeholder.input will be true. After loading the plugin, you can re-use these properties in your own code.
    • Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra input element to fake@placeholder for password inputs. This means you can safely do stuff like:
      <label for="bar">Example label</label>
      <input type="password" placeholder="foo" id="bar">

      And the <label> will always point to the <input> element you’d expect. Also, all CSS styles based on the ID will just work™.

placeholder

how to use?

Call $(selector).placeholder(options) on an input element with an attribute placeholder.

$('input#search').placeholder();
$(":input[placeholder]").placeholder();

Options

The following options can be passed to the plugin.

  • activeClass –The class to apply when input is blurred. Defaults to placeholder.
  • focusClass – The class to apply when input is active. Defaults to placeholderFocus.
  • overrideSupport –Pass true to force the plugin to work on browsers which natively support the placeholderattribute. Defaults to false.
  • preventRefreshIssues – Optionally attempt to prevent Firefox from auto filling values on refresh, by turning autocompleteoff. Defaults to true.

https://github.com/Strangemother/jQuery.placeholder/blob/master/example.html

Another placeholder:

http://www.andresvidal.com/labs/placeholder.html

$('input#search').placeholder({onBlur: "blurred", onChange: "changed"});


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: