通过学习前辈的思想,个人想法整理如下:
- 通过两个元素标签,仿造出placeholder的内容
- 使用position定位好两个元素标签
- 第一要隐藏两个元素标签display:none,在<!--[if gte IE 8]><![endif]-->中设置style样式为display:inline-block
- 使用js控制效果,通过给页面绑定点击事件并且利用target对象做判断,控制两个元素标签的显藏:
- 点击的对象是元素标签,当前点击对象隐藏,判断另外的输入框值是否为空,是否隐藏显示第二个元素标签
- 点击的对象时输入框,当前输入框的元素标签隐藏,判断另外的输入框值是否为空,是否隐藏显示第二个元素标签
- 点击是其他对象,判断所有输入框的值是否为空,是否显示或隐藏两个元素标签
HTML代码如下:
<div><div class="Account_img"> <div class="ion-person-stalker"></div> </div><input id="Account" name="Account" type="text" value="" placeholder="Username账户" class="valid"> <span class="show_placeholder" id="span1">Username账户</span></div>
<div> <div class="password_img"> <div class="fa fa-key"></div> </div><input data-val="true" data-val-required="请填写用户密码" id="Password" name="Password" type="password" placeholder="Password密码"> <span class="show_placeholder" id="span2">Password密码</span></div>
CSS代码略
JS代码如下:
<!--[if gte IE 8]> <script type="text/javascript"> $(document).click(function (e) { var e = e || window.event; var target = e.srcElement || e.target; if (target.id == ‘span1‘) { controll_input1(); $(‘#Account‘).focus(); } else if(target.id == ‘span2‘){ controll_input2(); $(‘#Password‘).focus(); }else if(target.id=="Account"){ controll_input1(); }else if(target.id=="Password"){ controll_input2(); }else{ if ($(‘#Account‘).val() == "") { $(‘#span1‘).show(); } if ($(‘#Password‘).val() == "") { $(‘#span2‘).show(); } } }); function controll_input1(){ $(‘#span1‘).hide(); if ($(‘#Password‘).val() == "") { $(‘#span2‘).show(); } } function controll_input2(){ $(‘#span2‘).hide(); if ($(‘#Account‘).val() == "") { $(‘#span1‘).show(); } } </script> <style> .show_placeholder { display: inline-block; } </style> <![endif]-->
时间: 2024-08-10 19:06:23