Placeholder appearing only after click HTML JS - javascript

I have a simple form. When the page loads, the input fields are empty, and the placeholder only appears when I click on the field.
<input type="text" onblur="if(this.value=='') this.value='Vorname,
Name';" onfocus="if(this.value=='Vorname, Name')
this.value='';" name="dynamic_0" title="Vorname, Name" value="">
How can I get the placeholder to be visible on page load as well?

Use the html placeholder element
<input type="text" placeholder="whatever you want" onblur="if(this.value=='') this.value='Vorname, Name';" onfocus="if(this.value=='Vorname, Name') this.value='';" name="dynamic_0" title="Vorname, Name" value="">
for old IE compatibility you should check out this polyfill aswell:
https://github.com/ginader/HTML5-placeholder-polyfill

Related

Textbox like gmail login page

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

How to edit HTML Form text box using Javascript?

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>

HTML validations from javascript

<input type="text" id="newFname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="First Name" />
<input type="text" id="newLname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="Last Name"/>
Is it possible to disable html validation on second input without modifying pattern or required attributes?
What you could do, put the inputs in separate forms and add the novalidate attribute to the second form.
Check this page for more information.

Text disappear on click, but new text entered disappears to

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">

Text box with default text

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" />

Categories