f6design/Remove/restore a form field's default value on focus/blur ( jQuery)
$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
$(this).css('color', '#000');
}
});
$(this).blur(function() {
if(this.value == '') {
$(this).css('color', '#999');
this.value = default_value;
}
});
});
If your HTML form fields have a 'watermark' default value, it will be removed when the field is focussed and replaced if focus is lost (and the user has left the field blank).
To use give your form field a class of 'default-value'
jurajhilje/Wordpress and Joomla - like search input (remove default value on focus) ( jQuery)
// Javascript
var $searchInput = $('#search-input'),
defaultSearchInputValue = $searchInput.attr('value');
$searchInput
.focus(function()
{
if($(this).attr('value') == defaultSearchInputValue) $(this).attr('value', '');
})
.blur(function()
{
if($(this).attr('value') == '') $(this).attr('value', defaultSearchInputValue);
});
// HTML
<input type="text" id="search-input" value="Search" />
jesudasjj/on focus remove input value ( jQuery)
$(document).ready(function() {
$('.rmv-dft-val').click(
function() {
if (this.value == this.defaultValue) {
this.value = '';
}
}
);
$('.rmv-dft-val').blur(
function() {
if (this.value == '') {
this.value = this.defaultValue;
}
}
);
});
yhs/Simply clear the default input value on first :focus ( jQuery)
$("input[type='password'], input[type='text'], textarea").each(function(){
$(this).one('focus',function(){
$(this).val("");
});
});
andres_314/Text input default value recover ( jQuery)
var textBoxs = $('.input-text-js');
textBoxs.each(function() {
var theValue = $(this).attr('value');
$(this).focus(function (){
if($(this).attr('value') == theValue){
$(this).attr('value','').addClass('writingIt');
}
}).blur(function () {
if($(this).attr('value') == ''){
$(this).attr('value',theValue).removeClass('writingIt');
}
});
});
This snippet could be used when a text input has a default value. Thus, when user clicks on the input to write, the default value disappears and allows the user to write, but if the user does not type anything, the default value will appears again. It also adds a class to the input when the user is typing on it and is removed when the input loses focus.
This snippet must be inside the ready event.
For the HTML markup, the only thing to take care is that you must use the same class in all the inputs that you want to give this functionality. In the example I use \"input-text-js\", but you can use whatever you want.
You can see this snippet working on www.retto.com
cdurocher/jQuery: Input text default value, clear value on click, if typed value erased, get default value back ( jQuery)
<script type="text/javascript">
$(document).ready(function() {
swapValue = [];
$("#qvtit-qvtit").each(function(i){
swapValue[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swapValue[i]) {
$(this).val("");
}
$(this).addClass("focus");
}).blur(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swapValue[i]);
$(this).removeClass("focus");
}
});
});
});
</script>
Specifiy a default value to input text field. OnFocus, the default value clear and let you type a new value. If typed value is erased then the default value is set back.
jesudasjj/on focus remove default value and "itl" class ( CSS)
$('.removeVal').live("click focus", function() {
if (this.value == this.defaultValue) { this.value = ''; $(this).removeClass("itl"); }
});
$('.removeVal').live("blur", function() {
if (this.value == '' || this.value == this.defaultValue) { this.value = this.defaultValue; $(this).addClass("itl"); }
});
nshakin/Remove Input Value Text On Focus ( JavaScript)
onblur="if (this.value == '') {this.value = 'youDefaultValue';}" onfocus="if (this.value == 'yourDefaultValue') {this.value = '';}"
Removes default value on focus and replaces on blur
keith/Toggle INPUT value on focus ( jQuery)
swapValue = [];
$(".swap-value").each(function(i){
swapValue[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swapValue[i]) {
$(this).val("");
}
$(this).addClass("focus");
}).blur(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swapValue[i]);
$(this).removeClass("focus");
}
});
});
The markup would look like this:
<input class="swap-value" type="text" value="Search"/ >
accelm/Clear all default field values for inputs ( jQuery)
$('input[type=text]').focus(function(){
if (this.defaultValue==this.value){this.value = "";}
});
$('input[type=text]').blur(function(){
if (this.value==""){this.value=this.defaultValue;}
});
If included in a global javascript, whenever an input receives focus it will clear the default value. If the element loses focus without any user input then it will put the default value back in there. Useful for when you aren't using <label> and putting the label in the value of the text field instead.
Rembrand/Changing the default text value on focus with jQuery ( jQuery)
//http://www.electrictoolbox.com/jquery-change-default-value-on-focus/
$(document).ready(function() {
$('.default-value').each(function() {
var default_value = this.value;
$(this).css('color', '#666'); // this could be in the style sheet instead
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
$(this).css('color', '#333');
}
});
$(this).blur(function() {
if(this.value == '') {
$(this).css('color', '#666');
this.value = default_value;
}
});
});
});
---
<input type="text" class="default-value" size="30" value="Enter keywords here" />
<input type="text" class="default-value" size="30" value="Another search box" />
Originally from http://www.electrictoolbox.com (see src)\r\nClear the default value of a form field when you click on it (when you want to type) and put it back if you leave without typing anything.
misteroneill/jQuery Clear Default Input Values ( jQuery)
(function($){
$.fn.clearDefault = function(){
return this.each(function(){
var default_value = $(this).val();
$(this).focus(function(){
if ($(this).val() == default_value) $(this).val("");
});
$(this).blur(function(){
if ($(this).val() == "") $(this).val(default_value);
});
});
};
})(jQuery);
// Usage: $('input.clear-default').clearDefault();
This function loops through a result set of inputs and for each result, it clears the default value onfocus and restores the default if the value is empty onblur.
mscribellito/Default Value ( JavaScript)
(function($){
$.fn.defaultValue = function() {
var args = arguments;
var c = 0;
return this.each(function() {
var el = $(this);
var def = args[c++];
el.val(def).focus(function() {
if (el.val() == def) {
el.val("");
}
}).blur(function() {
if (el.val().replace(/\s+/, "") == "") {
el.val(def);
}
});
});
};
})(jQuery);
$(document).ready(function() {
$('#name').defaultValue("asdf");
});
lynseydesign/Default search value clear ( jQuery)
$("#keywords").focus(function() {
if( this.value == this.defaultValue ) {
this.value = "";
}
}).blur(function() {
if( !this.value.length ) {
this.value = this.defaultValue;
}
});
binshtok/Form default values ( jQuery)
jQuery(document).ready(function(){
$("input, textarea").focus(function(){
if ($(this).attr("value") == $(this).attr("title"))
$(this).attr("value", "")
});
$("input, textarea").blur(function(){
if ($(this).attr("value") == "")
$(this).attr("value", $(this).attr("title"))
});
});