I have an input field in which you can type some text. It has some default text:
<input type="text" id="text" value="Type some text here" maxlength="35" tabindex="10">
I want to make the default text disappear when the user clicks on the default text or inside the input field.
How can I do this?
Try using the placeholder attribute (placeholder="Your Text" instead of value="Your Text"):
<input type="text" id="text" maxlength="35" tabindex="10" placeholder="Type some text here">
Note: Placeholder attribute doesn't work in IE8/9, or Opera Mini (http://caniuse.com/#feat=input-placeholder).
Use the placeholder attribute
<input type="text" id="text" value="" maxlength="35" tabindex="10" placeholder="Type some text here">
If you want to support older browsers:
<input type="text" id="text" value="Type some text here" maxlength="35" tabindex="10" onclick="this.value = (this.value == 'Type some text here' ? '' : this.value);">
http://jsfiddle.net/gLjt98af/
1) Using placeholder attribute
You can use placeholder attribute as shown below. It will show as long as you don't click inside the text box. Once you type anything inside it, the text will disappear.
HTML
<input type="text" id="text" placeholder="Type some text here" maxlength="35" tabindex="10">
2) Using java script function
HTML
<input type="text" id="text" value="Type some text here" maxlength="35" tabindex="10"
onclick='cleartext()' onblur='settext()'>
JS
function cleartext(){
document.getElementById('text').value= '';
}
function settext(){
if(document.getElementById('text').value=== ''){
document.getElementById('text').value= 'Type some text here'
}
}
Instead of using the placeholder attribute you can also try this:
<input type="text" value="Type some text here" onfocus="if (this.value == 'Type some text here') {this.value=''}" />
Related
For example, I have a text input with a value of "insert text here" like this:
<input type="text" value="insert text here" />
When I click on the block of the input, then the text of "insert text here" will automatically disappear, but when the user cancel to write something there, the text will appear again.
How to do this?
Thanks
USE placeholder attribute
<input name="" type="text" placeholder="place holder text here."/>
but it may not work in older browser. if you are for older browser as well than you should use javascrip/jquery for dealing with this problem.
<input type="text" class="userName" value="Type User Name..." />
$(document).ready(function(){
$('.userName').on('focus',function(){
var placeHolder = $(this).val();
if(placeHolder == "Type User Name..."){
$(this).val("");
}
});
$('.userName').on('blur',function(){
var placeHolder = $(this).val();
if(placeHolder == ""){
$(this).val("Type User Name...");
}
});
});
see deme JSFIDDLE
Use this placeholder attribute
<input type="text" placeholder="insert text here" />
<input type="text" name="fname" placeholder="insert text here">
You need to use the "placeholder" attribute like so:
<input type="text" placeholder="insert text here" />
The placeholder text will be automatically deleted when typing something in the field
http://www.w3schools.com/tags/att_input_placeholder.asp
use a placeholder instead of value.
<input type="text" placeholder="insert text here" />
You can achieve this using Placehoder
but u need to be aware of Older versions of browsers, because it doesn't supports the place hoder
<input type="text" value="some text" placeholder="insert text here"/>
for older versions of browser u can use the below link and download the js
link
If you want compatible in all browsers then you can use this code.
<!DOCTYPE html>
<html>
<body>
First Name: <input type="text" id="myText" placeholder="Name">
<p>Click the button to display the placeholder text of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myText").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
I am creating a websites, and I have came across a predicament with my coding.
I am writing a 'submit form' and I need it to look like the following example:
Message: (Gives the user to submit a message, or type any comments) And inside the text box, I'd like for it to say 'Type your message here' but when you click within the box, the 'type your message here' disappears. I also would like to be able to control how large this text box is.
Name: Type your first and last name here (I want it to function the same as above)
Email Address: Type your email address here: (Again, function same as above)
This, is the code that I have so far, and I am not sure if it's correct or not, for what I'm trying to do:
<form method="post" action="mailto:youremail#youremail.com" >
<b>Message:</b><br><input type="textbox" value="text_name" onfocus="if (this.value=='Text_name') this.value='';" style="width: 300px;" style="height: 300px;"/><br/>
<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" /><br />
<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" /><br />
<input type="submit" value="Send Email" />
</form>
There are lots of plugins available fir this. But you can use a HTML5 property "placeholder"
<input type="text" placeholder="Enter your name...">
HERE is the demo. Text/hint will diappear as you start typing.
<b>Message:</b><br><input type="textbox" placeholder="Type your message here" style="width: 300px;" style="height: 300px;"/><br/>
<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" placeholder="Type your first and last name here" /><br />
<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" placeholder="Type your email address here"/><br />
<input type="submit" value="Send Email" />
From my understanding this is pretty much a duplicate of: Onclick event to remove default value in a text input field right?
If you are fine with HTML5 then you can use placeholder otherwise you will need to use Javascript that removes the text onblur
I suggest you to use bootstrap css for better styling. Just have a look at this http://getbootstrap.com/css/ . I hope this would be helpful for you
You can define a script and use the below function since it can be used for both onfocus and onblur,
function clearText(field) {
if(field.defaultValue == field.value) {
field.value = “”;
}
else
if(field.value == “”) {
field.value = field.defaultValue;
}
}
I'm making a contact form that a user can type in then when they click submit it opens Outlook with their input. The problem is that the output is really messy. It outputs like this:
name=John+Smith&email=I+am+contacting+you&comment=example+text+here
I want to output to be more like:
name=John Smith email=I am contacting you comment=example text here
Is that possible with this HTML5 code:
<form method="post" name="contact" action="mailto:myemail#gmail.com">
<p>
<label>Name</label>
<input name="name" value="Your Name" input type="text" size="50" />
<label>Email</label>
<input name="email" value="Your Email" input type="text" size="50" />
<label>Your Comments</label>
<textarea rows="5" cols="5" name="comment"></textarea>
<br />
<input class="button" input type="submit" />
</p>
</form>
Since you have not specified otherwise, your form is “send” using the default enctype application/x-www-form-urlencoded.
Add the attribute enctype="text/plain" to your form element.
I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
With a bit of JavaScript:
<input
value="Enter username..."
onfocus="if (this.value === 'Enter username...') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder:
<input placeholder="Enter username.." ... />
but this attribute is not supported in old browsers.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>
You'd need attach an onFocus event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
I think for your situation, the easy and simple for your html input , you can
probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
With HTML5, you can now use the placeholder attribute like this:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_placeholder.asp
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
This is exactly what you want
$(document).tooltip({ selector: "[title]",
placement: "top",
trigger: "focus",
animation: false});
<form id="form">
<label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
<input id="myinput1" type="text" title="This tooltip persists" />
<input id="myinput2" type="text" title="This one also" />
</form>
[ref]
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
If you don't insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:
<form action="input_password.htm">
<label for="username" title="This is your user name...">Username: </label><input id="username" name="Username" type="text" size="20" maxlength="20"></p>
</form>
If you click the label, the input field will get the input focus.
If you hover over the label, it will show a longer explanation.
Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).
Define tooltip text
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
I want my search field to say "Where are you" make it disappear when clicked and and appear again when if he clicks outside leaving it blank.
This is the search form:
<div id="search-10" class="widget_search">
<form role="search" method="get" id="searchform" action="http://chusmix.com/?s=" onsubmit="window.location = action + s.value + '+: <?php the_search_query() ?>'; return false;">
<div>
<input class="ubicacion" type="text" value="" name="s" id="s2" style="margin-left:0px;">
<input type="submit" id="searchsubmit" value="Buscar">
</div>
</form></div>
I tried this but for some reason it didn't work:
<li id="search-10" class="widget_search">
<form role="search" method="get" id="searchform" action="http://chusmix.com/">
<div>
<input class="ubicacion" type="text" value="" name="s" id="s" style="margin-left:418px;">
<input type="submit" id="searchsubmit" value="Buscar" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" />
</div>
</form></li>
This removes the default text when a user clicks on the search form and adds it back when the user clicks off the search form.
<form id="searchform" method="get" action="search.php">
<input class="textbox" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text">
<input type="submit" id="searchsubmit" value="" class="searchsubmit" />
</form>
Fake the border of the input using a div, and position the real input and a label inside it - one of top of the other.
Conceal the label when the element gets the focus, put it back when the focus is lost if the value is blank.
There is an example using jQuery.
See the example below for raw javascript -
<input type="text" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" />
Beside this, you can use jquery, dojo, mootools plugin to handle this.