I want a textbox functionality like a gmail login page textbox. Right now I have code like this:
<script>
function inputFocus(i){
if(i.value===i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value===""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<body>
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
...
</body>
The problem with this code is when I select the tetbox, type "First Name" and if I reselect the textbox the text is clearing. And also gmail login page textbox functionality looks great, until I type a letter it shows the transperent text. But I don't know how to implement it.
For the "transparent text" you need to use the placeholder attribute:
<input type="text" name="firstname" ... placeholder="Email">
are you looking for a placeholder ??
If so... you can do like this..
<input type="text" name="somename" id="someid" value="" placeholder="Email">
Placeholder is used to display the text in the text box and will disappear as soon as you start typing..
If you want to delete the "transparent text" once start typing, you can use placeholder attribute of input element
This attribute is introduced in HTML5 to handle this scenario without writing any peice of javascript code
Your html code should look like this
<input type="text" name="firstname" placeholder="First Name"/>
This will also work as desired when you delete your text, as it will reset the transparent text back again.
Also, here is a working example on jsfiddle
I also, encourage you to review new elements and attributes introduced in HTML5, it will save a your time writing a lot of javascript to handle already built in functionalities
Related
In Firefox when a text control has the attribute "required" a popup appears when the user does not enter any text:
<input id="foo" type="text" name="foo" required>
Is it possible with Javascript to invoke the same such popup but with a custom message? Something like:
document.getElementById("foo").?message = "Custom message goes here!";
document.getElementById("foo").?invoke();
There are many possible ways to do this and almost coutless validation libraries. The absolute simplest and still relying on html5 is utilizing oninvalid and setCustomValidity.
Support is pretty much 100% at this point - http://caniuse.com/#feat=form-validation
<form>
<input id="foo" type="text" name="foo" required oninvalid="this.setCustomValidity('Custom message goes here!')"/>
<input type="submit"/>
</form>
I want to put a text next to an input box, after an successful if clause.
Just need to know how to show up such text.
Thanks
<input type="text" class="form-control" id="username" placeholder="Username" name="username" required autofocus/>
And my code snippet:
$("#username").append("<p>This username is not available</p>");
If your using jQuery, you can simply use:
$("#your-element-id").append("<strong>whatever text you need to add</strong>");
You will need to make sure that #your-element-id contains the input box. You may need to add the relavant CSS as well.
I have a webpage with an email text field, that is not inside a <form> tag, like so:
<input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value="">
I'm using the latest Chrome (v35) and I've previously entered an email that is "example#domain.com" (for the sake of the explanation).
The problem is this:
When I reload my webpage, click on the email text field and start typing "exa", an auto-complete box pops-up with "example#domain.com".
If I move the mouse cursor over the suggestion, without clicking it, the text field shows the "example#domain.com" inside it. When I move the cursor away from the suggestion box, the text field still shows the full email address.
Why is that a problem? Because when I try to read the value of the text field using jQuery or vanilla javascript, I get "exa", instead of "example#domain.com".
$("#email").val(); // returns "exa"
If I envelope the input text field inside a <form> tag, the problem described above, doesn't occur - the auto-completed text disappears from the input field when the mouse cursor moves away from it, so the text field and the value reading is in sync.
<form><input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value=""></form>
I've created a JSFiddle with a demo.
According to this, a an input field can work perfectly outside a <form> tag.
I've tested it on Firefox, and everything works well.
So why is that?
why don't you use autocomplete="off" attribute in input field. This one works fine for me on chrome
<input id="email" label="False" name="email" placeholder="Email" autocomplete="off" required="required" type="email" value="">
Updated Fiddle
I have a text box with a default text. I am using javascript to dissapear it when the user clicks in this, but i want to make it work without javascript. Is there any way to do that in html or php? Thank you!
It can be done in flat HTML5 using the placeholder attribute of the <input> tag
<input type="text" placeholder="Default Text" />
In HTML5, there has been the introduction of new attribute called placeholder
You can use it like this
<input type="text" placeholder="text to show and hide" />
it is simple you can use html5 control also.there
like.
<input type="text" name="txtFirstName" id="txtFirstName"
placeholder="enter first name" />
I have a signup form with 3 fields:
Username
Email
Password
On most browsers when a user clicks on a particular field, the placeholder value displayed is blanked out so the user can type and if they type nothing and come out of the field the placeholder text re-appears. Anyway some browsers e.g. chrome don't hide the placeholder text onfocus so I had to write some javascript to take care of this.
I'm quite new to javascript but to me the code I've written to deal with this doesn't seem right. I have a feeling it could be shorter and better.
For each field I have this inside a document ready function:
$("#field_id").focusin(function() {
$(this)[0].placeholder = "";
});
$("#field_id").focusout(function() {
$(this)[0].placeholder = "Enter email";
});
My html:
<p><input class="signupFields" data-validate="true" id="user_username" name="user[username]" placeholder="Username" size="30" type="text" /></p>
<p><input class="signupFields" data-validate="true" id="user_email" name="user[email]" placeholder="Email" size="30" type="text" /> </p>
<p><input class="signupFields" data-validate="true" id="user_password" name="user[password]" placeholder="Password" size="30" type="password" /> </p>
So imagine that times 3 .. Seems like a lot of code for such a simple requirement. Also I really don't like the fact that I'm trying to mimic javascripts document.getElementById. There must be a way I can do this in a more jQuery like way. Not liking the [0].
Can any body give me an example of a cleaner way of doing this exact same thing?
Kind regards
I'd suggest that you don't need to worry about this, but to remove the placeholder text on focus (and to restore the placeholder on blur) I'd advise the following:
$('input').focus(
function(){
$(this).data('placeholder',this.placeholder).removeAttr('placeholder');
}).blur(
function(){
$(this).attr('placeholder',$(this).data('placeholder')).data('placeholder','');
});
JS Fiddle demo.
The only reason to use the $(this)[0] notation is to 'break out' from the jQuery-fied $(this) object back to the native DOM node. To avoid doing that, it's easier to just this:
$('input').focus(
function(){
this.dataPlaceholder = this.placeholder;
this.removeAttribute('placeholder');
}).blur(
function(){
this.placeholder = this.dataPlaceholder;
this.removeAttribute('dataPlaceholder');
});
JS Fiddle demo.
References:
blur() (jQuery).
focus() (jQuery).
data() (jQuery).
focus() (jQuery).
removeAttr() (jQuery).
removeAttribute().
assuming your html is like:
<input id="username" type="text" placeholder="username"/>
<input id="email" type="text" placeholder="email"/>
<input id="password" type="text" placeholder="password"/>
your JS could be:
$("input").focusin(function() {
$(this).data('placeholder',this.placeholder);//store the current placeholder
this.placeholder = "";//no need for $(this)[0]
}).focusout(function() {
this.placeholder = $(this).data('placeholder');//retrieve the stored placeholder
});
this would target all of them with only one bit of code.
Here's a demo: http://jsfiddle.net/JKirchartz/SGZNQ/