为了账号安全,请及时绑定邮箱和手机立即绑定

input+label制作兼容IE8的输入提示,实现placeholder效果,下附代码

input+label制作兼容IE8的输入提示,实现placeholder效果,下附代码

wubin_work 2017-01-18 17:18:14
现在问题是无论点击哪个input总会让第二个input上的label隐藏,请问该如何修改,才能让点击第一个时候第一个label隐藏,点击第二个就隐藏第二个的label? 求帮助 不胜感激!最近遇到很多这样问题,比如表格中 每行的按钮,如何判断点击的是那一行上的按钮?<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Input兼容提示</title><style>#login{margin:100px auto;width: 500px;}              .form-row{padding: 10px 0;position: relative;overflow: hidden;}              .form-row input{height: 30px;float: left;padding-left: 5px;line-height: 30px;width: 300px;border: 1px solid #ddd;}              .form-row  .placeholder{color: #C1C0C0;position: absolute;top: 19px;left: 60px;}              .form-row .id-inhead{float: left;height: 33px;width: 50px;line-height: 33px;}</style></head><body><form id="login">             <div>                          <label for="accounts">帐号:</label>              <label for="accounts">请输入帐号</label>              <input type="text" id="accounts">             </div>             <div>                            <label for="pass">密码:</label>              <label for="pass">请输入密码</label>              <input type="password" id="pass">             </div></form><script>var form=document.getElementById('login');var odiv=form.getElementsByTagName('div');var elediv=[];// 筛选class 名为form-row的节点 存入数组elediv中for(var i=0,l=odiv.length;i<l;i++){if (odiv[i].className=='form-row') {elediv.push(odiv[i]);}}// 遍历form-row节点数组for(var n=0,m=elediv.length;n<m;n++){// 获取数组中input节点数组var input=elediv[n].getElementsByTagName('input');// 获取数组中label节点数组var label=elediv[n].getElementsByTagName('label');// 定义存放 class名为placeholder的label变量 labelpvar labelp;for(var i=0;i<label.length;i++){if (label[i].className=='placeholder') {labelp=label[i];}}// 当input获得焦点时候,labelp隐藏                                        for(var a=0;a<input.length;a++){                                         input[a].onfocus=function(){                                                                   labelp.style.display="none";                                         }                                        }}</script></body></html>
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 3844 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信