首先将文本框隐藏掉
js通过触发事件来显示文本框
我们动手实现一个小例子
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js控制元素的显示与隐藏</title>
<style type="text/css">
*{
margin:0
padding:0
}
</style>
</head>
<body>
<input type="button" id="btn1"value="显示">
<input type="button" id="btn2" value="隐藏">
<input type ="text" id="textArea"style="display:none">
<script>
'use strict'
var text = document.getElementById("textArea")
var oBtn1 = document.getElementById("btn1")
var oBtn2 = document.getElementById("btn2")
oBtn1.onclick = function(){
text.style.display = "block"
}
oBtn2.onclick = function(){
text.style.display = "none"
}
</script>
</body>
</html>
可以用隐藏的,也可以自己用数组,map等一些对象保存赋值的话可以通过id给它赋值document.getElementById("id").value= "alsdfj"
<p>标题：<input type="text" name="title" value='点击隐藏' title='点击隐藏' /></p><p>时间: <input type="text" name="time" value='点击隐藏' title='点击隐藏' />地点：<input type="text" name="address" value='点击隐藏' title='点击隐藏'/></p>
给每个input添加一个属性，例如我添加一个title，值就是vlue值
代码是用jquery写的
$("input[type=text]").each(function(){
$(this).focus(function(){
var nr=$(this).attr("title")
if($(this).val()==nr){
$(this).val("")
}
})
$(this).blur(function(){
var nr=$(this).attr("title")
if($(this).val()==''){
$(this).val(nr)
}
})
})
