I'm trying to find a script that will fill a textfield of say an optin form with a text like 'fill in your e-mail address' and dissappear when click on. I know they're all over the net but searching for it only returns javascript autofill scripts where suggestions are listed from a dropdown below the textfield.
HTML5 supports placeholder text, which you can use like this
<input name="email" placeholder="Enter your email address" />
This will automatically disappear when you click on the textfield. For older browsers, you can use one of the above suggestions.
This is what I use on my website Expiringlinks.co. Now, if you only want to apply this to one input, change $('input') to $('#yourinputid'). The input field should have a value field that equals your before text.
var tempValue='';
$('input').click(function(){
tempValue = $(this).attr('value');
$(this).attr('value','');
});
$('input').focusout(function(){
if ($(this).attr('value')==''){
$(this).attr('value',tempValue);
}
});
For you input field
<input type="text" value="Whatever you want to show before the click" />
jsFiddle example
Or, a slightly different fiddle that doesn't require an ID on the label, but needs the textbox/label to be wrapped in something, for example a <p> tag.
HTML
<input type="text" name="email_address" id="Email" />
<label for="Email" id="EmailLabel">Please enter your email address</label>
CSS
label
{
display: none;
}
jQuery
$(document).ready(function()
{
$('#Email').focus(function()
{
$('#EmailLabel').show();
}).blur(function()
{
$('#EmailLabel').hide();
});
});
Related
Hello I am working on a simple form that also uses place-holder text. I am implementing this behaviour with JQuery and not html attributes, mainly because the place-holder input also shows error messages to the user which need to be styled differently than plain place-holder text.
Right now the form behaves like this.
Clicking on the input hides the the place-holder input and sets focus on the main input field.
If the user has entered data then the place-holder does not show up.
Now this is all fine, but when the user presses the TAB key to change focus, none of the above happens.
Here is the relevant JQuery code and the HTML:
$("#plh_username").click(function(){
$(this).hide();
$("#username").focus();
});
$('body').click(function(e){
var target = $(e.target);
if(!target.is('#plh_username')) {
if ( $("#username").val() == "" ){
$("#plh_username").show();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
How can I achieve the same effect when the user selects an input field without actually clicking on one?
You could try using .focus() and .focusout() instead of .click().
$("#plh_username").focus(function(){
$(this).hide();
$("#username").focus();
});
$('#username').focusout(function(){
if ($(this).val() === ""){
$("#plh_username").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
<input value="Press tab or shift+tab" />
Quote from the documentation:
Elements with focus are usually highlighted in some way by the
browser, for example with a dotted line surrounding the element. The
focus is used to determine which element is the first to receive
keyboard-related events.
Dont use .click(). Use .focus().
I think you are looking for onfocus event. This event triggers when a control gains the focus.
$("#plh_username").focus( function(){
alert("focus")
});
for example see http://jsfiddle.net/wb2vef0g/
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
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 am trying to create a form which changes it's required fields dynamically based on a part radio selection.
So a person chooses which way they want to be contacted in the radio:
<label><input type="radio" name="contactPref" id="SMS" value="SMS"/>SMS</label>
<label><input type="radio" name="contactPref" id="Twitter" value="Twitter" />Twitter</label>
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone"/>
<label for="twitterName">Twitter:</label>
<input type="text" name="twitterName" id="twitterName"/>
And depending on what they decide is their preferred mode of contact. After a field becomes selected, the corresponding text box should be made a required field. For example: if SMS radio field becomes selected then the Phone Number text box must be filled while the other fields becomes optional to fill. If a person chooses the Twitter radio, then the Twitter Name text box becomes a required field.
Here is my jsfiddle jsfiddle.net/lordro/q7Cxs
My key issue is calling up the element and attribute as well as the syntax for it.
Thanks in advance!
$('[name="contactPref"]').on('change', function() {
var isSMS = this.value=='SMS';
$('#phone').prop('required', isSMS);
$('#twitterName').prop('required', !isSMS);
});
FIDDLE
Using jQuery,
$("#SMS").change(function () {
if ($(this).is(':checked')) {
$("#phone").attr("required", "required");
$("#twitterName").removeAttr("required");
}
});
$("#Twitter").change(function () {
if ($(this).is(':checked')) {
$("#twitterName").attr("required", "required");
$("#phone").removeAttr("required");
}
});
Check this fiddle
just note that
*
"The required attribute of the tag is not supported in
Internet Explorer 9 and earlier versions, or in Safari."
*
Is there anyway to prevent the browser from displaying previously inputted values for a field on press of the down key?
If this is not possible, another problem of mine is on press of the down key, the list of previously inputted values will be shown and on press of the TAB key, the currently highlighted value on the list will be chosen and will be set as the value of the field. I do not want this, I just want the focus to be passed to the next input element w/o choosing any values.
Are there any ways to override the browser behavior? A solution in play javascript is preferred though jQuery solutions are fine as well. Thanks!
Just add the autocomplete attribute
<input type="text" autocomplete="off" />
You can disable autocomplete by adding autocomplete="off" onto your input tags. MDN Reference
Example
<input type="text" name="email" value="" autocomplete="off" />
See this Stack Overflow post for browser compatibility.
html code
<input type="text" autocomplete="off" id="password-field" class="form-control" name="multi_user_pin" placeholder="Type your PIN here"/>
jquery code
$('#password-field').on('input keydown',function(e) {
if(e.keyCode == 8 && $(this).val().length==1) {
$(this).attr('type', 'text');
$(this).val('');
}
else{
if ($(this).val() !== '') {
$(this).attr('type', 'password');
} else {
$(this).attr('type', 'text');
}
}
});
This code works fine for password field to prevent to remember its history with all browsers