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
Related
<input type="text" id="Amount" />
<lable id="copy_Amount" > </lable> $
Anything written in "Amount" input , need to written in lable
Pointing out some obvious flaws in the accepted answer. Mainly the use of onkeyup and innerHTML.
<input type="text" id="Amount" />
<!-- there is no lable tag. also label is not used as label so use span instead -->
<span id="copy_Amount"></span>
<script>
//can input text without keyup
document.getElementById("Amount").oninput = function(){
//no need for another lookup - use this
let stringValue = this.value;
//do not use innerHTML due to html injection
document.getElementById("copy_Amount").textContent = stringValue
}
</script>
use keyup event
Correct lable tag label
use text() to set label text
$('#Amount').keyup(function() {
$('#copy_Amount').text($('#Amount').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Amount" />
<label id="copy_Amount" > </label> $
You can do this using JQuery.
$('#Amount').change(function() {
$('#copy_Amount').text($('#Amount').val());
});
You can try this
<script>
document.getElementById("Amount").onkeyup = function () {
var stringValue = document.getElementById("Amount").value;
document.getElementById("copy_Amount").textContent = stringValue;
}
</script>
Is there a way to delete the label when I click into the textarea?
http://jsfiddle.net/1smvym84/4/
HTML:
<li id='field_1_9' class='gfield' >
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label>
<div class='ginput_container'>
<textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea>
</div>
</li>
JQUERY:
$(document).ready(function(){
$('.textarea').text($('.gfield_label').text());
$('.gfield_label').remove();
});
Many thanks for any help :-)
If you want to delete it on focus:
$("#input_1_9").focus(function() {
$(this).parent("div").prev("label").remove();
});
I think what you are looking for is HTML's placeholder attribute:
<textarea name="input_9" id="input_1_9" class="textarea medium" tabindex="8" rows="10" cols="50" placeholder="Your text goes here"></textarea>
I think it will be better if you will use placeholders. Like this:
<textarea placeholder="Place this inside the textarea"></textarea>
But, if you want do it in JS it will be like this:
$('.textarea').on('click', function() {
$('.gfield_label').remove();
});
Try this:
$(document).ready(function(){
//work for all elements which have the css class textarea
$('.textarea').click(function(){
$('.textarea').val($('.gfield_label').html());
//if you want to remove all elements having gfield_label css class
$('.gfield_label').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<label class="gfield_label">this is label</label>
<textarea class="textarea"></textarea>
</form>
You probably want to delete it when entering then add it back if nothing is written. There are 2 ways to accomplish this:
The HTML5 way:http://jsfiddle.net/1smvym84/8/
$(document).ready(function(){
var placeholderText = $('.gfield_label').text();
$('.textarea').attr("placeholder",placeholderText);
$('.gfield_label').remove();
});
The jQuery way: http://jsfiddle.net/1smvym84/7/
$(document).ready(function(){
var placeholderText = $('.gfield_label').text();
$('.textarea').text(placeholderText);
$('.gfield_label').remove();
$('.textarea').focus(function(){
var $this = $(this);
if ($this.text() === placeholderText){
$(this).text("");
}
}).blur(function(){
var $this = $(this);
if ($this.text() === ""){
$(this).text(placeholderText);
}
})
});
If you are using the for attribute on the labels consistently, looking up the appropriate label to delete should be fairly easy:
$('.textarea').on("focus", function() {
var areaId = $(this).attr("id");
var areaLabel = $("label[for='" + areaId + "']");
// Get the content from the label
$(this).text(areaLabel.text());
// Remove the label
areaLabel.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label>
<div class='ginput_container'>
<textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea>
</div>
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
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";
}
};
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" />