首先将文本框隐藏掉
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>
<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)
}
})
})
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：
2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：
3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：
4、编写js脚本，这里用到Jquery，给button添加一个点击事件，然后获取div的dom，判断dom中的display属性值，如果是“none”，就显示div，否则则隐藏:
5、全部完成后，按下crtl+s保存，来到编辑器的右侧，观察显示效果，此时div是显示的：
6、点击hide按钮，会发现div消失了，反复点击按钮会重复显示隐藏的效果，以上就是用JS控制div显示隐藏的案例：
