I am trying to edit HTML form text box using Javascript.
I want the HTML text box to initially display "Enter your name here", and as soon as the user clicks on the box, I want the text box to go blank, so that the user does not have to delete the "Enter your name here" text before actually entering her name.
How do I go on about doing that?
This is what I have tried, without any success.
<body>
<script type="text/javascript">
function name()
{
window.document.getElementById("name").value='';
}
</script>
Your Name:<input type="text" value="Enter Your Name Here" id="name" onclick="name();">
</body>
That is called a placeholder, and in HTML5 you have a attribute on input for that:
<input type="text" placeholder="Enter Your Name Here" />
See how it works in jsfiddle.
I'd advise you to use the 'placeholder' attribute of the textbox:
<input type="text" placeholder="Enter Your Name Here" id="name">
This will give you the desired effect (i.e. disappearing text on user click).
use
window.document.getElementById("name").innerHTML = #value
You can use the placeholder attribute of input tag.
Sample:
<input type="text" name="fname" placeholder="First name">
<script type="text/javascript">
function name()
{
window.document.getElementById("name").value='';
}
</script>
Your Name:<input type="text" value="Enter Your Name Here" id="name" onclick="javascript: name();"> </body>
Related
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 am making a form where almost every person filling out the form will be from the same city, state and zip code. Is there anyway I can have default text in the text area that will count when it sends? I have seen forms where there is text in the text area, but when the user clicks on the field the text disappears. I would not want the text to disappear on field click.
This is just a sample form with "default" inputs in the text box
<form action="test.php" method="post">
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
The thing to add is value="something here"
In this example the input boxes has John and Doe written not there as a placeholder
As you can see here at w3school
If you are useing a text area then you can do something like this:
<textarea name='someName'>Default value</textarea>
whatever you write between the tag is the default value for the textarea
<textarea id="txtarea">This is the Default Value</textarea>
This is different for input type=text. In that case you need to use the value attribute
I looked for this everywhere but I couldn't find anything useful.
I need a way to put a default text (preferably a php variable) in a HTML text field whenever I load the page. It's like a placeholder (I'm aware of the placeholder attribute, I don't want that) that doesn't disappear so that the user can submit that value if he wants.
I'm guessing it can be done with a simple javascript script but I suck at that.
Thank you for your help.
You're looking for the value attribute then: value="text here"
With a PHP variable, it would be something like this:
<form action="path-here">
<input type="text" name="field-name" value="<?php echo $variable; ?>"><br />
<input type="submit" value="Submit">
</form>
Here are two ways to put a default value in a text field.
The first way is the simplest. All it involves is setting the value of the text field.
<input type="text" id="myTextBox" value="Some default text">
The second was uses a JavaScript function that runs when the page loads.
<!-- This solution is a little more complicated. -->
<body onload="setDefaultText()">
...
<input type="text" id="myTextBox">
</body>
<script>
function setDefaultText() {
document.getElementById("myTextBox").value = "Some default text";
}
</script>
JSFIDDLE Example
<form>
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
You are looking for the value="Text Here"
Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.
So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.
How can I make it so that the newly entered text does not disappear?
My current code for the text fields:
http://pastie.org/8366114
<input type="text" value="Enter Your First Name" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your First Name';"
onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Email';"
onclick="javascript:if(this.value=='Enter Your Email')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';"
onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>
I apologize for not posting it on here, but I don't know how to do the code block thing..
to do this with javascript all you need is
<input type="text" value="Enter Your First Name"
onblur="if(this.value=='')this.value='Enter Your First Name';"
onfocus="if(this.value=='Enter Your First Name')this.value='';" />
DEMO
however you can just simply use the html5 placeholder reference
also
dont use the same id more then once, instead use class.
input is self-closing (like <br>)
</br> is wrong use <br> or <br />
here is a working version of your code, i also added submit as the value for your button
<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">
DEMO
<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />
or if you are using HTML5, you can use placeholder attribute:
<input type="text" placeholder="Enter Your First Name" id="form" />
you have to make the onfocus event the same as the onclick event, e.g:
onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"
onFocus="this.value=''"
This is causing your text fields to be reset to blank unconditionally.
You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.
Remove content from form onclick:
in haml:
= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"
in html:
<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">
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" />