JavaScript DOM 获取焦点然后逐行显示
2016-06-14 21:59
330 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> #demo1 input, #demo2 input, #demo3 input, #demo4 textarea{ margin-top: 10px; } input { width: 180px; height: 20px; } #demo1{ border: 1px solid #0CC; } #demo2 input, #demo3 input, #demo4 textarea { border: 1px solid #0CC; } label { display: none; } </style> <script> function fun1() { var element=document.getElementById("demo2"); element.style.display="block"; } function fun2() { var element=document.getElementById("demo3"); element.style.display="block"; } function fun3() { var element=document.getElementById("demo4"); element.style.display="block"; } </script> </head> <body> 姓 名: <input type="text" id="demo1" onFocus="fun1()" /> <br /> <label id="demo2">家庭住址: <input type="text" onFocus="fun2()" /> <br /> </label> <label id="demo3">电 话: <input type="text" onFocus="fun3()" /> <br /> </label> <label id="demo4"> 个人简介:<br /> <textarea rows="10" cols="30"> </textarea> </label> </body> </html>
相关文章推荐
- Json.net实现方便的Json转C#(dynamic动态类型)对象
- js_九九乘法表
- ajax获取json路径方式
- Newtonsoft.dll JSON序列化与反序列化
- JSON
- js-表单
- JavaScript基础
- js文件内部导入引用js文件方法
- [Javascript] delete keyword
- 原生js写的tab切换
- 原生js全选,反选,不选
- JavaScript中解决浏览器兼容性问题
- JSTL
- JS页面加载完毕后执行的多种方式和比较
- 简易JS模板引擎
- 实现javascript Date加减功能
- kmdjs集成uglifyjs2打造极致的编程体验
- js时间字符串转Date对象
- 使用dropkick.js插件实现省市区三级联动效果
- JS 监控页面刷新,关闭 事件的方法