Accessing and modifying content of html body
Question
I am new with html and javascript. I have been trying to modify the value of an input element with javascript. The purpose is to set the field blank when user clicks it. the code is as below:
<html>
<head>
<script>
function fn(){
if(document.input1.value=="name")
document.input1.value="";
}</script></head>
<body>
<input name="input1" type="text" value="name" onClick="fn()"/>
</body></html>
However, this code is not working. I am using a chrome browser. When I surround the input tag with a form tag and in script I use document.form.input1.value the code works. where is the problem? I am not concerned about how to blank the field on user click, rather how to access the value from a function. Thanks in advance.
6 answers
solution1
1 2012-09-20 12:32:14
This would be much better (using placeholder ):
<html>
<body>
<input name="input1" type="text" placeholder="name" />
</body>
</html>
This is self explanatory. Do let me know if you need the explanation.
solution2
1 2012-09-20 12:33:27
Or an alternative could just be to use the "placeholder" attribute, which won't require any extra javascript. See my jsfiddle
The only difference is that the text will disappear when new text is entered, not when clicked. The benefit is that the placeholder text will automatically come back again when the field is cleared.
solution3
1 ACCPTED 2012-09-20 12:40:15
You may also want to try the onFocus and onBlur events:
<html>
<head>
<script>
function fn(){
if(document.getElementById("input1").value=="name")
document.getElementById("input1").value="";
}
function fn2(){
if(document.getElementById("input1").value=="")
document.getElementById("input1").value="name";
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" value="name" onFocus="fn();" onBlur="fn2();"/>
</body>
</html>
EDIT :
If you prefer to get the element by its name, you can use document.getElementsByName , however, this returns a list of all matching elements and you would then treat it as an array of matched elements. In the case above, you would switch document.getElementById("input1") with document.getElementsByName("input1")[0]
solution4
0 2012-09-20 12:38:06
<html>
<head>
<script>
function fn(){
if(document.getElementById("input1").value=="name")
document.getElementById("input1").value="";
}</script>
</head>
<body>
<input id="input1" type="text" value="name" onClick="fn()"/>
</body>
</html>
solution5
0 2012-09-20 12:38:34
Have you heard about Jquery ? It's a javascript library which will simplify your work !
Download jquery from the jquery website and include it to your project with
<script type="text/javascript" src="[[jquery file.js]]"></script>
Then you can use :
<script>
$("#[[yourinputid]]").click(
function()
{
if ($(this).val() == "name")
$(this).val("")
});
</script>
jquery = easy javascript ;)
solution6
0 2012-09-20 13:04:25
Alternatively you can pass the whole input element into the javascript function you created and then manipulate the same, notice how the whole element is passed with "onClick="fn(this)" here this means the element itself. By enclosing the element in form tags, I believe gives you the capability to call the element by name as duplicate names are allowed in a single document which can then be segregated in several form instances.
<html>
<head>
<script >
function fn(obj)
{
if(obj.value=="name")
obj.value="";
}
</script>
</head>
<body>
<input name="input1" type="text" value="name" onClick="fn(this)"/>
</body></html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.