I´m using the "placeholder" attr. for placeholder text in input-fields
I need to have this functionality in IE-incarnations too.
I want the Placeholder to hide on FOCUS! every workaround i found hides the placeholder when the first type is entered.
I´m unable to work it out myself, it needs to simply delete the input´s Placeholder-Text on focus but also recovers that placeholder-text on blur if input-value is empty.
I´m trying to put this to work
jQuery(document).ready(function () {
jQuery('[placeholder]').focus(function() {
input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
input.attr('placeholder','')
}
}).blur(function() {
var input = jQuery(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
jQuery(this).find('[placeholder]').each(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
});
this changes the value of the placeholder to "(nothing)" and the behaviour is as i want but on blur it cant recover the placeholder-value beacause its "(nothing)" now
//Update
the solution for me :
$(function()
{
$('input').each(function()
{
$(this).val($(this).attr('holder'));
});
$('input').focus(function()
{
if($(this).attr('holder')==$(this).val())
{
$(this).val('');
}
});
$('input').focusout(function()
{
if($.trim($(this).val())=='')
{
var holder = $(this).attr('holder');
$(this).val(holder);
}
});
});
If you don't want to use placeholder you can use the code below or use this simple jQuery plugin: jQuery Placeholder.
jsFiddle Live Demo Of Code Below
HTML
<input type='text' holder='First name'><br>
<input type='text' holder='Last name'><br>
<input type='text' holder='Age'>
JavaScript
$(function() {
$('input').each(function() {
$(this).val($(this).attr('holder'));
});
$('input').focus(function() {
if($(this).attr('holder')==$(this).val()) {
$(this).val('');
}
});
$('input').focusout(function() {
if($.trim($(this).val())=='') {
var holder = $(this).attr('holder');
$(this).val(holder);
}
});
});
Also you can use this simple jQuery plugin: jQuery Placeholder.
Use the placeholder attribute:
<input type="text" placeholder="Search here">
For browsers that do not support placeholder; you can use a polyfill
For Webkit based browsers and Firefox you can hide the placeholder in pure CSS:
input:focus::-webkit-input-placeholder,
input:focus::-moz-placeholder { opacity:0; }
Old and not the best way is:
<input type="text" name="fname" value="Enter text here" onFocus="if (this.value=='Enter text here'){this.value='';}"
onBlur="if (this.value==''){this.value='Enter text here';}" />
But it works even in IE6.
There are a number polyfills out there that will "add" placeholder functionality in browsers that do not support it. I've used jQuery Placeholder in the past, but there are quite a few others mentioned in the modernizr docs (scroll down to the section on placeholders).
The nice thing about jQuery Placeholder is that you shouldn't have to change/add any code aside from a reference to the library. Just add the placeholder attribute to your element.
here is my code to hide placeholder text on input and textarea focus(). Simple and working great.
$('textarea,input').focus(function(e){
val=$(this).attr('value');
if (!val)
$(this).attr('value',' ');
this.select();
}).blur(function(e){
val=$(this).attr('value');
if (val==' ')
$(this).attr('value','');
});
I use these 2 methods (jquery) to hide placeholder when the input gets focus, and when it loses focus and it is empty show placeholder.
input.focus
step-1: simply saving placeholder value into a universal variable( here pl)
step-2: set placeholder property of input to ''
input.focusout
step-1: set placeholder property of input to the saved variable(here pl)
var pl;
//on getting focus
$('input').focus(function(){
pl=$(this).prop('placeholder');
$(this).prop('placeholder','');
});
// on losing focus:
$('input').focusout(function(){
$(this).prop('placeholder',pl);
});
Related
i want to remove the placeholder once the user on focus the input text field.
$('#keyfob').attr('placeholder','Please click here for Key Fob scanning to work');
$('#keyfob').attr('placeholder', function () {
this.toggle = !this.toggle;
return this.toggle ? $(this).data('placeholder') : "";
});
}, 1500);
This is the function i am using to show the blinking placeholder and keyfob is the field ID and i have return this code on blur event of the field.
so on focus on this field i have to hide or remove the blinking placeholder text.
$('#keyfob').attr('placeholder','');
This is the function i am using to remove or hide the placeholder,but somehow it is not hiding.
Can anyone help me in solving this issue?
You can use onfocus and onblur events and clear or set the placeholder's text within their respective handler. Try this,
Solution 1
HTML :
<input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder="Please click here to Key Fob scanning work">
jQuery :
$("#keyfob").on("focus", function(){
previousElement = $(this);
placeholderText = $(this).attr("placeholder");
$(this).attr("placeholder", "");
});
$("#keyfob").on("blur", function(){
$(previousElement).attr("placeholder", placeholderText);
});
Note : If you have multiple input elements you just need to refer those using same class attribute. This will make everything else work.
jsFiddle
Solution 2
If you have a single input element then you can handle it more easily. Try this way,
$('#keyfob').on("focus blur", function(){
$(this).attr("placeholder") == "" ? $(this).attr("placeholder", "Please click here for Key Fob scanning to work") : $(this).attr("placeholder", "");
});
jsFiddle
Solution 3
Updated Code : To make the placeholder blinking make the content placeholder empty and fill it again within a predefined setInterval. And onfocus use clearInterval to clear the blinker setInterval.
jQuery :
previousElement = $("#keyfob");
placeholderText = $("#keyfob").attr("placeholder");
$("#keyfob").on("focus", function(){
$(this).attr("placeholder", "");
clearInterval(blinker);
});
$("#keyfob").on("blur", function(){
$(previousElement).attr("placeholder", placeholderText);
console.log(previousElement);
blinker = setInterval(function(){
$("#keyfob").attr("placeholder") == "" ? $("#keyfob").attr("placeholder", "Please click here for Key Fob scanning to work"): $("#keyfob").attr("placeholder", "");
}, 1000);
});
$("#keyfob").blur();
jsFiddle
does anyone know how to remove input placeholder using jquery?
I want to do is if one of the inputbox got a value...all the inputbox placeholder will be remove....does anyone know how to do that?
<input type="text" name="name" placeholder="1.)">
<input type="text" name="age" placeholder="2.)">
<input type="text" name="address" placeholder="3.)">
Should work:
$(':input').removeAttr('placeholder');
Get all the inputs, and attach a change event handler, inside the event handler get the value from all the inputs, join the values together, and if it's still nothing, none of the inputs have a value, if it has length, at least one of the inputs have value, and you can remove the placeholder attributes :
var inputs = $('input[type="text"]');
inputs.on('change', function() {
if ( $.map(inputs, function(el) { return el.value; }).join('').length )
inputs.removeAttr('placeholder');
});
FIDDLE
I DONT RECCOMEND to remove placeholder
instead, make a focus, and this will automatically hide placeholder at that moment:
$(element).focus();
.removeAttr()
var txtbox = $('input[type="text"]');
txtbox.change(function () {
txtbox.removeAttr('placeholder');
});
$('input[name="name"]').removeProp('placeholder');
You can change the placeholder to an empty string on keyup.
$("input[type=text]").keyup(function() {
$("input[type=text]").attr("placeholder","")
});
JSFiddle demo
Would something like this work? Untested, but it should remove the placeholder attribute on the first change to any input.
var inputs = $('input');
inputs.one('change', function(){
inputs.removeAttr('placeholder');
});
I've gone one step further, in case you also want this. This code will remove the placeholder text in all text inputs if any of them have a value, but if you then remove all the values it will put the placeholder text back. May not be necessary, but have it...
var $inputs = $("input:text");
$inputs.on("change", function() {
if ($.map($inputs, function(el) { if (el.value) return o.value; }).length) {
$inputs.each(function() {
this._placeholder = this.placeholder;
$(this).removeAttr("placeholder");
});
} else {
$inputs.each(function() {
this.placeholder = this._placeholder;
});
}
});
jsfiddle example...
if you want to reset it back to the original placeholder instead of removing it entirely try clearing the val() first then adding the attr()
$('#name').val('');
$('#name').attr('placeholder', 'whatever your previous placeholder was');
try:
if ($(input).val()) {
$(input).attr("placeholder", "")
}
I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});
Is there a better way of doing this
$("#<%=Text_Name.ClientID%>").mouseleave(function () {
var t_name = this.value;
if (t_name == "") {
$(this).val("Name");
$("#<%=Text_Name.ClientID%>").addClass("grey_add");
$("#<%=Text_Name.ClientID%>").removeClass("black_add");
}
});
What this code does is when you scroll out of the textbox it leaves the it returns to you "Name".
A con about using this technique is when user move mouse out the textbox it fills something in when user types.
It's really simple with jQuery, check this:
html
<input type="text" id="myInput" value="Name" />
jQuery
$(function() {
$('#myInput').focusin(function() {
$(this).val('');
});
$('#myInput').focusout(function() {
$(this).val('Name');
$(this).css('background-color', '#ccc');
});
});
Here goes jsFiddle.
No need for plugins or much code for this.
<input name="search" placeholder="<%=Text_Name.ClientID%>"/>
no javascript needed.
$("#<%=Text_Name.ClientID%>").blur(function () {
var t_name = this.value;
if (t_name == "") {
$(this).val("Name");
$("#<%=Text_Name.ClientID%>").addClass("grey_add");
$("#<%=Text_Name.ClientID%>").removeClass("black_add");
}
});
This event happens when you focus on something else, which is what the textbox at the top right of stack overflow probably uses.
You could look into the watermark plugin I was posting about here:
Custom jQuery plugin return val()
Just edit it to be mouseover / mouseout instead of on focus/blur.
jsFiddle edited to show mouseover/mouseout
Im using a simple form with a textarea, when the users clicks onto the textarea I want the contents of the textarea to be cleared.
Is this possible?
$('textarea#someTextarea').focus(function() {
$(this).val('');
});
If you only want to delete the default text (if it exists), try this:
$("textarea").focus(function() {
if( $(this).val() == "Default Text" ) {
$(this).val("");
}
});
By testing for the default text, you will not clear user entered text if they return to the textarea.
If you want to reinsert the default text after they leave (if they do not input any text), do this:
$("textarea").blur(function() {
if( $(this).val() == "" ) {
$(this).val("Default Text");
}
});
Of course, the above examples assume you begin with the following markup:
<textarea>Default Text</textarea>
If you want to use placeholder text semantically you can use the new HTML5 property:
<textarea placeholder="Default Text"></textarea>
Although this will only be supported in capable browsers. But it has the added advantage of not submitting the placeholder text on form submission.
My suggestion is that you only remove the initial default content on the first focus. On subsequent focuses, you risk removing user content. To achieve this, simply .unbind() the focus handler after the first click:
$("textarea").focus(function(event) {
// Erase text from inside textarea
$(this).text("");
// Disable text erase
$(this).unbind(event);
});
jsFiddle example
As a note, since you are using a textarea which has open and closing tags, you can can use $(this).text(""); or $(this).html("");... and, since the text inside a textarea is its value you can also use $(this).val(""); and $(this).attr("value", ""); or even this.value = "";.
HTML5 offers a more elegant solution to this problem: the "placeholder" attribute.
It'll create a text in background of your textarea which will appear only when the textarea is empty.
<textarea placeholder="Enter some text !"></textarea>
There are a couple of issues here that are only partially addressed in the current answers:
You need to clear the text when the user focuses the field
You only want to clear it the first time the user clicks on the field
You do not want the user to be able to submit the default text before it's been cleared
You might want to allow the user to submit the default text if they decide to type it back in. I have no idea why they'd want to do this, but if they insist on typing it back in, then I lean toward letting them do it.
With these details in mind, I'd add a class named "placeholder" to the field and use something like the following:
$("form textarea.placeholder").focus(function(e) {
$(this).text("");
$(this).removeClass("placeholder");
$(this).unbind(e);
});
Validate that the "placeholder" class name was removed when the form is submitted to guarantee that the user really, really wants to submit some stupid placeholder text.
If you're using the jQuery Validation Plugin, then you can put it all together like this:
$.validator.addMethod("isCustom", function(value, element) {
return !$(element).hasClass("placeholder");
});
$(form).validate({
rules: {
message: {
required: true,
isCustom: true
}
},
messages: {
message: "Message required, fool!"
},
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", "disabled");
form.submit();
}
});
jQuery(function($){
$("textarea").focus(function(){
$(this).val("");
});
});
Something like this?
$('textarea#myTextarea').focus(function() {
if ($(this).val() == 'default text') {
$(this).val('');
}
});
<textarea type="text" onblur="if ($(this).attr('value') == '') {$(this).val('The Default Text');}" onfocus="if ($(this).attr('value') == 'The Default Text') {$(this).val('');}">The Default Text</textarea>
I found that simply
$('#myForm textarea').val('');
clears the form in Chrome but this did not work for Firefox (6.x). The value was empty in Firebug but the previous text still showed in the textarea. To get around this I select and rebuild the textareas one at a time:
$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);
});
This finishes the job in Firefox and does not break Chrome. It will go through all of the textareas in a form one by one. Works in all other browsers (Opera, Safari, even IE).
This is possible and i think you are going for a code that can do this for more textareas than one...
This is what i use for my site:
Javascript:
<script type='text/javascript'>
function RemoveText(NameEle)
{
if ($('#' + NameEle) == 'default')
{
$('#' + NameEle).val('');
$('#' + NameEle).text('');
$('#' + NameEle).html('');
}
}
function AddText(NameEle)
{
if ($('#' + NameEle) == '')
{
$('#' + NameEle).val('default');
$('#' + NameEle).text('default');
$('#' + NameEle).html('default');
}
}
</script>
HTML:
<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>