Text box with default text - javascript

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

Related

Javascript, I am not being able to cursor to input box

I can't set focus on html input, I tried this code, And it doesn't work.
document.getElementById('ember19').focus();
document.getElementById('ember19').click();
document.getElementById('ember19').select();
document.getElementById('ember19').value='Badman55555#hotmail.com';
document.getElementById('ember19').setAttribute('value','Badman55555#hotmail.com');
document.getElementById('ember22').focus();
document.getElementById('ember22').click();
document.getElementById('ember22').select();
document.getElementById('ember22').value='Bad123456';
document.getElementById('ember22').setAttribute('value','Bad123456');
Please before answer try your code on this page
https://id.sonyentertainmentnetwork.com/signin/
Try using autofocus
<input type="text" name="myInput" autofocus />
https://www.w3schools.com/tags/att_autofocus.asp

How do I add autofocus to my spring form input?

<div>
<sf:input type="text" cssClass="xxsLen" id="field1" maxlength="3" path="Data.field1"/>
</div>
I have more but I want to add autofocus to the first one. How do I do it here? I tried adding auto focus at the end but it breaks my code. Also this is a .jsp file.
If your Spring version is remotely modern, you can add your own attributes. You need proper XHTML though, so try this:
<sf:input type="text" cssClass="xxsLen"
id="field1" maxlength="3" path="Data.field1" autofocus="autofocus" />

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

Default text in an input field

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"

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.
Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:
Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.
If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>
Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery
Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

Categories