We Keep Coding

Select all the text in an input, focusin

I want to have all the text selected when I give the focus to an element.
I used
$('.class-focusin').focusin(function(e) {
$(this).select();
});
But it's not the perfect behavior I want. When i click between two characters, the input value is not seleted, there is a cursor in the middle.
I want the behavior of the url bar in chrome browser: you click and the cursor is replaced by the value selection
Feel free to test my problem in this fiddle:
http://jsfiddle.net/XS6s2/8/
I want the text to be able to receive the cursor once selected.
The answer selected, below is definitely what I wanted, Thanks

You could have a variable to see if the text has been selected or not:
http://jsfiddle.net/jonigiuro/XS6s2/21/
var has_focus = false;
$('.class-focusin').click(function(e) {
if(!has_focus) {
$(this).select();
has_focus = true;
}
});
$('.class-focusin').blur(function(e) {
has_focus = false;
});

I guess you have to wait for the browser to give focus to the element, then do your selection:
$('.class-focusin').focus(function(e) {
var $elem = $(this);
setTimeout(function() {
$elem.select();
}, 1);
});
Yuck. Or simply bind to the click event instead:
$('.class-focusin').click(function(e) {
$(this).select();
});

Try using click instead of focusin.
$('.class-focusin').click(function(e) {
$(this).select();
});
Demo
Bye!

Working Demo http://jsfiddle.net/cse_tushar/XS6s2/22/
$(document).ready(function () {
$('.class-focusin').click(function (e) {
$(this).select();
});
});

It's a direct duplicate of Select all the text in an input, focusin, here's a nice answer from it
$(".class-focusin").on("focus",function(e){
$(this).select();
});
$(".class-focusin").on("mouseup",function(e){
e.preventDefault();
});
http://jsfiddle.net/XS6s2/31/

Contact Form 7 In-Field-Labels

I was wondering if someone could assist with an issue I am having with form labels not disappearing when I select the field?
I currently have a Wordpress site where I use the Contact Form 7 plugin for my form creation. I have since used a jQuery code snippet I found to implement some In-field-Labels but for some reason when I click in the fields the label text will not go away?
What am I doing wrong?
http://alanbrandt.com/contact
Please note I am not a developer so sorry if this seems like a stupid question.
Hope someone can help?
Thanks!
ANSWER:
Here is the solution...
jQuery(function(){
$('#commentform')
.on('mouseenter focus', 'input, textarea', function () {
$(this).closest('p').find('label:first').css('opacity', 0.5)
})
.on('mouseleave focusout', 'input, textarea', function () {
$(this).closest('p').find('label:first').css('opacity', 1)
})
.on('input', 'input', function (e) {
var label = $(this).closest('p').find('label:first');
e.target.value == '' ? label.show() : label.hide()
});
});

Try this,
jQuery(function(){
jQuery('form.wpcf7-form').on('keyup','input, textarea',function(){
jQuery(this).closest('span').prev('label').css('opacity',0);
});
});
Updated
jQuery(function(){
jQuery('form.wpcf7-form').on('keyup','input, textarea',function(){
var opaq=1;
if($(this).val())
opaq=0;// if something has written then opacity should be 0
jQuery(this).closest('span').prev('label').css('opacity',opaq);
});
});

Disable Form submit button if text field filled in

I am trying to implement some Jquery that basically says "If this text field is filled in then disable the submit button so that the form cannot be delivered/submitted"
So far I have come up with this, but it is not working
$(document).ready(function(){
$this = $("#inputValue");
if($this.val().length>0){
$('input[type=submit]').attr('disabled', 'disabled');
}
});
When i fill in the form and include text within the field I am not supposed to the form still gets submitted, what am i doing wrong?
Thanks

Your code only runs once on runtime. After that, it doesn't get checked again.
$(document).ready(function (){
$("#inputValue").on('change', function (){
if($(this).val().length > 0){
$('input[type=submit]').attr('disabled', 'disabled');
} else {
$('input[type=submit]').removeAttr('disabled');
}
});
});
Or, as #thomasfedb suggested:
$(document).ready(function (){
$('#inputValue').on('change', function() {
$("input[type=submit]").prop('disabled', $(this).val().length > 0);
});
});

I'd suggest you to bind a keyup event to do the check every time when user enters something to #inputValue field:
$(document).ready(function() {
$("#inputValue").on("keyup", function() {
$("input[type=submit]").prop("disabled", !!$.trim(this.value).length);
}).trigger("keyup");
});

Since you're using a hidden field it might be better to bind the change event:
$('#inputValue').on('change', function() {
$('input[type="submit"]').prop('disabled', this.value.length > 0);
}).change();

Try using this code.
$('input[type=submit]').attr("disabled", true);

JQuery advice or suggestion for new alternative solution

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

jquery textarea value focus

This is probably stupidity on my part, but where am I going wrong with this?
$(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
$(this).bind('focus', function() {
if($(this).val($txt)) {
$(this).val('');
}
});
});
});
Basically on focus I want to check if the value is the default value in this case 'Enter your comment', then if it is change the value to nothing.
Anyone know how to do this? I'm guessing its relatively simple. What the code does at the moment is removes any value.

Ok first off you should only have one tag with the id of comment since ids are supposed to be unique, but if we go with your code you have to setup a default value first like this:
<textarea id="comment">Enter text here</textarea>
Now the javascript:
(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
//alert($txt);
$(this).bind('focus', function() {
if($(this).val() === this.defaultValue) {
$(this).val('');
}
});
});
})();
The self executing function syntax has been corrected here and should be as follow:
(function () { // my code here })();
and for default value use:
this.defaulValue; // works for input boxes as well
Hope it helps. Cheers

jquery_example plugin do exactly what you need. You may have a look at its source code and get some inspiration. Or you can store the default value as meta-data on the tag and check against it on change event of the textarea tag.

try
$('#comment').live('click change focus', function() {
var $txt = $(this).val();
if($txt == 'Enter your comment' );
$(this).val('');
});
DEMO