I see this all over the web, but was wondering if anyone has the JavaScript code for the EASIEST way to show input value on blur, but hide in on focus.
This always worked for me:
<input
type="text"
value="Name:"
name="visitors_name"
onblur="if(value=='') value = 'Name:'"
onfocus="if(value=='Name:') value = ''"
/>
Since this still comes up on google, I'd like to point out that with HTML 5 you can use the placeholder attribute with an input to achieve this in one piece of html.
<input type="text" id="myinput" placeholder="search..." />
Placeholder is now standard across modern browsers, so this really would be the preferred method.
I prefer jQuery way:
$(function(){
/* Hide form input values on focus*/
$('input:text').each(function(){
var txtval = $(this).val();
$(this).focus(function(){
if($(this).val() == txtval){
$(this).val('')
}
});
$(this).blur(function(){
if($(this).val() == ""){
$(this).val(txtval);
}
});
});
});
It is modified Hide Form Input Values On Focus With jQuery by Zack Perdue.
The simplest approach I know of is the following:
<input
name="tb"
type="text"
value="some text"
onblur="if (this.value=='') this.value = 'some text'"
onfocus="if (this.value=='some text') this.value = ''" />
If you don’t care about valid HTML, you use the placeholder attribute. It will work out of the box on a Safari, and you can add some unobtrusive JS to mimic this behavior in other browsers.
More reading:
http://www.beyondstandards.com/archives/input-placeholders/ (JS implementation)
http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/
And google. ;-)
The solution is similar to the one Josh Stodola posted, but it’s more flexible and universal.
This is what I use on my blog. Just go there and check out the source code behind.
function displaySearchText(text){
var searchField = document.getElementById('searchField');
if(searchField != null)
searchField.value = text;
}
Your input field should look something like this:
<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/>
For all browsers:
<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" />
For newest version of browsers:
<input type="text" name="inputname" placeholder="Your value" />
Related
I want to put autofocus on a html textbox such that the cursor points to the end of some text already present in the textbox.
I know what the autofocus attribute does. And I have also seen put cursor at end of text input's value which answers how to put cursor at the end, But the textbox is not autofocussed upon page reload. How can I do both - autofocus the textbox upon page reload and put cursor to end of text ?
Code :
<textarea id="txtArea" style="width:106%; height:100px" align="center" name="task1" onkeypress="onTestChange();" onfocus="this.value = this.value;" autofocus ><?php echo $_GET["task"];?></textarea>
I want to put Cursor after the text echoed. It is not the value of the textarea.
Also the textbox I referred to is Textarea.
Please use this code and run in your browser
$(document).ready(function() {
var input = $("#test");
var len = input.val().length;
input[0].focus();
input[0].setSelectionRange(len, len);
});
<input type="text" id="test" autofocus value="value text" />
try to run this simple code and see u will notice that first text box will be focused and not the second
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
Something like this. Focus it, and set the value again.
<input type="text" value="this holds a value" id="element"/>
<script>
$(window).ready(function(){
$("#element").focus();
$("#element").val($("#element").val());
});
</script>
$( document ).ready(function() {
var t =$("#txtID");
t.focus().val(t.val());
});
Check chris G's answer on this question. Call function after you have set the focus to the textbox:
function SetCaretAtEnd(elem) {
var elemLen = elem.value.length;
// For IE Only
if (document.selection) {
// Set focus
elem.focus();
// Use IE Ranges
var oSel = document.selection.createRange();
// Reset position to 0 & then set at end
oSel.moveStart('character', -elemLen);
oSel.moveStart('character', elemLen);
oSel.moveEnd('character', 0);
oSel.select();
}
else if (elem.selectionStart || elem.selectionStart == '0') {
// Firefox/Chrome
elem.selectionStart = elemLen;
elem.selectionEnd = elemLen;
elem.focus();
} // if
} // SetCaretAtEnd()
The answer to your link already auto focused on page load.
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
JS Fiddle
That's my input field. I want to make value of it empty when I click it. How can I do this by using prototype framework of Javascript ?
<input name="ctl0$txtSearch" type="text" value="Quick Search" id="ctl0_txtSearch" class="MainSearchBar" />
Actually I am using PRADO. So the html tag to create input is
<com:TTextBox Id="txtSearch" Text="Quick Search" CssClass="MainSearchBar" />
And it has no onclick attr to handle Javascript.
onClick doesn't respond to keyboard events such as being 'tabbed' into. It would be more advisable to use onFocus for this. And to complement the operation also use onBlur.
<com:TTextBox Id="txtSearch" Text="Quick Search" CssClass="MainSearchBar"
Attributes.onfocus="if (this.value == this.defaultValue) this.value = '';"
Attributes.onblur="if (this.value == '') this.value = this.defaultValue;"
/>
Try this:
<input name="ctl0$txtSearch" type="text" value="Quick Search" id="ctl0_txtSearch"
class="MainSearchBar" onClick="javascript:ctl0_txtSearch.value='';" />
Here you go:
<input name="ctl0$txtSearch" type="text" value="Quick Search" id="ctl0_txtSearch" class="MainSearchBar" onclick="this.value = '';" />
If you want to have a place where you can also customize your text field behavior (clearing the field but also adding css...) try this code:
$('ctl0_txtSearch').observe('click', respondToClick);
function respondToClick(event) {
var element = event.element();
element.clear();
// ... do more customization here
}
JS alone is enough to clear the field by just using the onClick="javascript:this.value=''" attribute of the input field itself.
JS:
<script type="text/css">
$(function() {
$('#upper').keyup(function() {
this.value = this.value.toUpperCase();
});
});
</script>
HTML
<div id="search">
<input type="radio" name="table" class="table" value="professor" tabindex="1" /> Professor
<input type="radio" name="table" class="table" value="department" tabindex="2" /> Department
<input type="radio" name="table" id="upper" class="table" value="course" tabindex="3" /> Course
<input type="text" name="search" class="keywords" value="Select an option..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?':this.value;" tabindex="4" />
<div id="content"> </div>
</div>
Why is this still not working?? Just trying to call div ".keywords" from JS.
I think the most elegant way is without any javascript but with css. You can use text-transform: uppercase (this is inline just for the idea):
<input id="yourid" style="text-transform: uppercase" type="text" />
Edit:
So, in your case, if you want keywords to be uppercase change:
keywords: $(".keywords").val(), to $(".keywords").val().toUpperCase(),
Javascript string objects have a toLocaleUpperCase() function that makes the conversion itself easy.
Here's an example of live capitalisation:
$(function() {
$('input').keyup(function() {
this.value = this.value.toLocaleUpperCase();
});
});
Unfortunately, this resets the textbox contents completely, so the user's caret position (if not "the end of the textbox") is lost.
You can hack this back in, though, with some browser-switching magic:
// Thanks http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
function getCaretPosition(ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
CaretPos = ctrl.selectionStart;
}
return CaretPos;
}
function setCaretPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
// The real work
$(function() {
$('input').keyup(function() {
// Remember original caret position
var caretPosition = getCaretPosition(this);
// Uppercase-ize contents
this.value = this.value.toLocaleUpperCase();
// Reset caret position
// (we ignore selection length, as typing deselects anyway)
setCaretPosition(this, caretPosition);
});
});
Ultimately, it might be easiest to fake it. Set the style text-transform: uppercase on the textbox so that it appears uppercase to the user, then in your Javascript apply the text transformation once whenever the user's caret focus leaves the textbox entirely:
HTML:
<input type="text" name="keywords" class="uppercase" />
CSS:
input.uppercase { text-transform: uppercase; }
Javascript:
$(function() {
$('input').focusout(function() {
// Uppercase-ize contents
this.value = this.value.toLocaleUpperCase();
});
});
Hope this helps.
If you purpose it to a html input,
you can easily do this without the use of JavaScript! or any other JS libraries.
It would be standard and very easy to use a CSS tag text-transform:
<input type="text" style="text-transform: uppercase" >
or you can use a bootstrap class named as "text-uppercase"
<input type="text" class="text-uppercase" >
In this manner, your code is much simpler!
Solutions using value.toUpperCase seem to have the problem that typing text into the field resets the cursor position to the end of the text. Solutions using text-transform seem to have the problem that the text submitted to the server is still potentially lowercase. This solution avoids those problems:
function handleInput(e) {
var ss = e.target.selectionStart;
var se = e.target.selectionEnd;
e.target.value = e.target.value.toUpperCase();
e.target.selectionStart = ss;
e.target.selectionEnd = se;
}
<input type="text" id="txtTest" oninput="handleInput(event)" />
Can also do it this way but other ways seem better, this comes in handy if you only need it the once.
onkeyup="this.value = this.value.toUpperCase();"
try:
$('#search input.keywords').bind('change', function(){
//this.value.toUpperCase();
//EDIT: As Mike Samuel suggested, this will be more appropriate for the job
this.value = this.value.toLocaleUpperCase();
} );
I think the most easiest way to do is by using Bootstrap's class ".text-uppercase"
<input type="text" class="text-uppercase" />
I couldn't find the text-uppercase in Bootstrap referred to in one of the answers. No matter, I created it;
.text-uppercase {
text-transform: uppercase;
}
This displays text in uppercase, but the underlying data is not transformed in this way.
So in jquery I have;
$(".text-uppercase").keyup(function () {
this.value = this.value.toLocaleUpperCase();
});
This will change the underlying data wherever you use the text-uppercase class.
onBlur="javascript:{this.value = this.value.toUpperCase(); }
will change uppercase easily.
Demo Here
This answer has a problem:
style="text-transform: uppercase"
it also converts the place holder word to upper case which is inconvenient
placeholder="first name"
when rendering the input, it writes "first name" placeholder as uppercase
FIRST NAME
so i wrote something better:
onkeypress="this.value = this.value + event.key.toUpperCase(); return false;"
it works good!, but it has some side effects if your javascript code is complex,
hope it helps somebody to give him/her an idea to develop a better solution.
Here we use onkeyup event in input field which triggered when the user releases a Key. And here we change our value to uppercase by toUpperCase() function.
Note that, text-transform="Uppercase" will only change the text in style. but not it's value. So,In order to change value, Use this inline code that will show as well as change the value
<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
Here is the code snippet that proved the value is change
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form method="get" action="">
<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
<input type="button" name="" value="Submit" onclick="checking()">
</form>
<script type="text/javascript">
function checking(argument) {
// body...
var x = document.getElementById("test-input").value
alert(x);
}
</script>
</body>
</html>
<input id="name" data-upper type="text"/>
<input id="middle" data-upper type="text"/>
<input id="sur" data-upper type="text"/>
Upper the text on dynamically created element which has attribute
upper and when keyup action happens
$(document.body).on('keyup', '[data-upper]', function toUpper() {
this.value = this.value.toUpperCase();
});
**JAVA SCRIPT**
<html>
<body>
<script>
function #ToCaps(obj)
{
obj.value=obj.value.toUpperCase();
}
</script>
<input type="text" onkeyup=#ToCaps(this)"/>
</body>
</html>
**ASP.NET**
Use a css style on the text box, write css like this:
.ToCaps { text-transform: uppercase; }
<asp:TextBox ID="TextBox1" runat="server" CssClass="ToCaps"></asp:Te writxtBox>
**OR**
simply write this code in textbox
<asp:TextBox ID="TextBox1" runat="server" style="text-transform:uppercase"></asp:TextBox>
**1.Note you don't get intelligence until you type up to style="**
Javascript has a toUpperCase() method. http://www.w3schools.com/jsref/jsref_toUpperCase.asp
So wherever you think best to put it in your code, you would have to do something like
$(".keywords").val().toUpperCase()
you can try this
HTML
<input id="pan" onkeyup="inUpper()" />
javaScript
function _( x ) {
return document.getElementById( x );
}
// convert text in upper case
function inUpper() {
_('pan').value = _('pan').value.toUpperCase();
}
I want to clear the text field when the user clicks on that
<input name="name" type="text" id="input1" size="30" maxlength="1000" value="Enter Postcode or Area" onfocus=="this.value=''" />
Unless you are doing something specific where you only want to clear onclick, I would suggest (as others have noted) to use the onfocus actions instead. This way if someone is using tab to navigate it will also clear the default text.
You can also use onblur to check if it's empty to bring it back:
<input type="text" value="Default text" name="yourName" onfocus="if(this.value == 'Default text') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Default text'; }">
To do this you will need to use a scripting language, probably javascript. Here an example
<input type='text' value'Some text' onclick='javascript: this.value = ""' />
Hope this helps.
Edit:
To meet what David is explain here is a second example in case that is what you are looking for
<script type='javascript'>
var clear = true;
function clear(obj)
{
if(clear)
{
obj.value = '';
clear = false;
}
}
</script>
<input type='text' value'Some text' onfocus='clear(this);' />
Using jQuery library:
<input id="clearme" value="Click me quick!" />
$('#clearme').focus(function() {
$(this).val('');
});
Or you can simply use the placeholder attribute
For example<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>
You can use <input ... onfocus="this.value='';"/>.
This way, the field will be cleared when it gains focus. However, if you only want to clear it when user clicks on it (i.e. not when the field gains focus with the keyboard for example), then use onclick instead of onfocus.
However, as pointed by David Dorward in a comment, this behavior may not be expected by the user. So be careful to set this feature on really specific fields (such as search field).
This is how I use it for a temperature converter/calculator - when the user types (keyup), the text input box calculates using the assigned function; when the user selects the other text input (there are only two inputs), the selected text input will clear.
HTML:
<p class="celcius"><h2 style="color:#FFF">Input:</h2>
<input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" onfocus="this.value='';" id="celsius" />
</p>
<hr>
<h2 style="color:#FFF">Result:</h2>
<p class="fahrenheit">
<input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" onfocus="this.value='';"placeholder="Temperature (Fahrenheit)" />
</p>
JavaScript:
function Conversion() {
var tempCels = parseFloat(document.getElementById('celsius').value);
tempFarh =(tempCels)*(1.8)+(32);
document.getElementById('fahrenheit').value= tempFarh;
}
function Conversion2() {
var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
tempCels =(tempFarh - 32)/(1.8);
document.getElementById('celsius').value= tempCels;
}
try this ,it worked for me
add this into your input tag
<code>
onfocus="this.value='';"</code>
for example if your code is
<code>
<input type="text" value="Name" /></code>
use it like this
<code><input onfocus="this.value='';" type="text" value="Name" /></code>
function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}
onfocus = "Clear (this)"
Add a following script to your js file:
var input1 = document.getElementById("input1")
input1.onfocus = function() {
if(input1.value == "Enter Postcode or Area") {
input1.value = "";
}
};
input1.onblur = function() {
if(input1.value == "") {
input1.value = "Enter Postcode or Area";
}
};
How to add watermarks like "Enter textarea" for a textarea.
<textarea rows = "8" cols = "18" border ="0" class="input" style="border: none;" WRAP id="details" name ="details"></textarea>
Thanks..
I think you mean placeholder?
In HTML5:
<textarea placeholder="Enter textarea"></textarea>
In HTML4:
<textarea onclick="if (this.value == 'Enter textarea') this.value = '';">Enter textarea</textarea>
here is the code
<input type="text" name="q" size="25" maxlength="255" value=""/ class="googlesearch" onfocus="if(this.value != '') this.className = 'googlesearch2'" onblur="if(this.value == this.defaultValue) this.className = 'googlesearch'" />
from link
hope that will help.
i have written a jquery code for my purposes.
i think it might be excellent for your problem
to use it for any of your textarea/text field, you just have to add 'watermark' class & add 'placeholder' attribute with the watermark value to it.
e.g <textarea rows="2" placeholder="Post your question here" name="query_area" id="query_area" class="watermark">Post your question here</textarea>
the jquery code is as below.
$(document).ready(function(){
$(".watermark").each(function(){
$(this).val($(this).attr('placeholder'));
});
$(".watermark").focus(function(){
var placeholder = $(this).attr('placeholder');
var current_value = $(this).val();
$(this).css('color', '#192750');
if(current_value == placeholder) {
$(this).val('');
}
});
$(".watermark").blur(function(){
var placeholder = $(this).attr('placeholder');
var current_value = $(this).val();
if(current_value == '') {
$(this).val(placeholder);
$(this).css('color', '#676767');
}
});
})
There are many solutions. One of them is that all form elements have <label for="XX"> and all elements have <element id="XX"> so that you know to which element label belongs. Then in CSS you hide some labels, and with JS you check all hidden labels, and write label title/content to the form elements, if that element is empty. Then with JS you show and hide this text based on hover and inputed text.
Here is a nice one using jQuery
jQuery Watermark