I have a textbox that has a piece of text in it already so users know what is supposed to go in it. I've already set it up so clicking on it selects all the text. What I want to know if how I can make it so clicking on the textbox will clear all the text. Likewise, if the user deletes everything they wrote, how can I make the original text appear?
A perfect example of what I want to do is the textbox for the title when asking a question here on Stack Overflow.
With the code below you can simply add the class "clear" to any input element or textarea and it will clear the initial value!!!
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script>
$(function() {
$('.clear').one('focus', function() {
this.value = '';
});
});
</script>
</head>
<body>
<input type="text" value="Full Name" class="clear"/> <br />
<input type="text" value="Email" class="clear"/> <br />
<textarea value="About you..." class="clear"></textarea>
</body>
</html>
Fast and dirty, but does the job:
<input type="text" value="init..." onfocus="this.value=''; this.onfocus=null;" />
Update:
Since my answer in 2011 input placeholder became a common thing, so the proper solution is:
<input type="text" placeholder="init..." />
The textarea you created should have an id associated with it in the tag. The text area id would look something like this:
<textarea id="someId"...>
Where "someId" would be whatever name you give to it. Then when you use the following code
document.getElementById('someId').value = '';
it will replace the text in the box with the text specified by the function above. In this case, it will replace it with no text. Just make sure it only does this once, otherwise, when you click outside of the box, and then click inside of it again, the user's input will still be erased as well.
Related
I have an HTML input as follows:
<input type="text" value="Link etc..." readOnly={true}/>
I am trying to make the text inside the input to be auto highlighted at the point the input is displayed on the page.
I have found lots of questions that show how to do this onClick etc, but none that highlight the text by default when the input displays.
I am sure this is a simple task - but I cannot find the answer anywhere!!
NOTE: I am sure I could work out how to achieve this by firing a JavaScript function on my page - but this seems a bit of overkill - I am trying to achieve this in the HTML declaration
I am also using React - but I do not think this is relevant for this question?
AFAIK there is no default feature which highlight an input text when it's active in HTML. You will need to use some Javascript.
I can recommand you to check out this StackOverflow question which provides a simple and pretty efficient code:
<input type="text" name="textbox" value="Test" onclick="this.select()" />
N.B: In a UX point of view, highlight by default an input text on click can be a bad idea. If the user typed something and wants to modify his input, it will hightlight and he will need tu use the keyboard arrows to change the cursor position. Be carefull with this feature.
You could also do this with jQuery using document.ready if you wanted the box to always be selected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" name="textbox" id="textbox" value="Test" />
<script>
$(document).ready(function(){
var autoselect = document.getElementById('textbox');
autoselect.select();
});
</script>
I was trying to write my code here but for whatever reason the site prohibited me to. My code is essentially two texts with a button in the middle. Whatever you write in the first text it will be copied to the other text once you hit the button. I want to edit the code so that it does what it does and ALSO accepts values from the second text and copies to the first one. Thanks.
<html>
<head> <meta charset="utf-8"> </head>
<body>
<input type="text" value="" id="from" />
<button onclick="document.getElementById('to').value = document.getElementById('from').value">copy</button>
<input type="text" value="" id="to" />
</body> </html>
Use an on change for each of the text boxes. I'm a jQuery user but if you did it with standard JS you could do something like ... this is not full code ...
<textarea id='t1' name='t1' onChange="document.getElementbyId('t2').value=document.getElementbyId('t2').value"></textarea>
<textarea id='t2' name='t2' onChange="document.getElementbyId('t1').value=document.getElementbyId('t2').value">
</textarea>
Clicking the button would also trigger the change event. If you want it to copy the contents ONLY when the button is clicked, you could set a variable that stores the textarea id last changed and use that to determine which way to do the copy when the button is clicked.
I was having this problem with a more complex chunk of code, so I started messing with a html "joke" with the movie The Seven, and realized it was the same problem. Why doesn't it do anything when I click the button? I've tried it adding a function and script as well, get same problem. I want it to show the text inside the (formerly blank) input box when you click the button.
<html>
<body>
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').innerHTML='head of gwyneth paltrow';">
</body>
</html>
innerHTML, as the name suggests, refers to the HTML content of an element. You need to use value
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').value='head of gwyneth paltrow';">
See it in action
If the below code was opened in firefox 20.0.1 and type some value in the text box. once after typing the value hit the browser refresh button. the typed value getting shifted from one input elelment to another.
<html>
<head>
<script>
function searchPageLoader(){
document.getElementById('searchareaa').innerHTML='<label ></label>';
}
</script>
</head>
<body onload="searchPageLoader()">
<div id="searchareaa"></div>
<input type="text" id="pageCount" value="5"/>
<input type="text" id="startlimit" value="11"/>
<input type="text" id="endlimit" value="5"/>
</body>
</html>
It is happening only in firefox and and only if we do the innerhtml . What is the work around for this, as it is spoiling most of the application workflow.
If you surround the form controls (including the div with the new label) with <form></form> tags, this strange behavior disappears. See https://support.mozilla.org/questions/959372
How would I make a textbox, containing preexisting text, that when the user clicked within it all the text inside it would become highlighted. For example, the same way YouTube does the textboxes for the embed code on their videos. Thanks
If I've understood your problem correctly, you could use some javascript (untested code):
<script language="JavaScript">
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
<input type="text" name="sometext" size="100" value="The Text" onClick='selectText(this);'>
You can put the script between your <head> and </head> tags.