<p class="sougouContent"> </p> <p class="tag"> input login 密码输入框 </p> 1. 须求说明 <br> 登陆界面须要如图下图效果,如果采用<input>时。当用户输入的密码成了明文,这是不符合要求的。当把<input>的type属性改为passowrd时。默认的“密码”成了“?? ”。有人会想到用js来动态改变input的type属性,这种方法在某些浏览器去可行的如:火狐。但遇到万恶的IE去拿它没法。在IE中,input的type属性为只读。为了解决各浏览器的兼容问题采用如下办法。 <br> <br> <br> 2. 解决办法 <br> 我们采用HTML<label>标签来完成。<label>详情请查看http://www.w3school.com.cn/tags/tag_label.asp w3c标准。 <br> 如下是解决办法代码: <br> <div> <br> <ul> <br> <li> <br> <label>用户名</label> <br> <input> <br> </li> <br> <li> <br> <label>密 码</label> <br> <input> <br> </li> <br> <li> <br> <label>验证码</label> <br> <input> <br> <span><img alt="密码输入框内部显示汉字问题_html/css_WEB-ITnose" ></span> <br> </li> <br> </ul> <br> </div> <br> 将<label>标签做为一个层。把它放到我们要显示的位置。设置<label>标签的样式 <br> style="max-width:90%"放到输入框中。<label>标签的for属性与输入框的ID关联上。当用户点击<label>标签的文字时,对应的<input>标签会得到焦点。不须要修改<input>标签的type属性就能达到效果。 <br> <br> <h2>回复讨论(解决方案)</h2> <p class="sougouAnswer"> label 这个标签的使用,也只有在表单方面了。 </p> <p class="sougouAnswer"> 楼主这是分享经验啊,强烈支持! </p> <p class="sougouAnswer"> nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br> <br> </p> <br> <meta> <br> <title>无标题文档</title> <br> <script> <br /> function init(){ <br /> var text=document.getElementById("test"); <br /> text.onfocus=function(){ <br /> var p=this.parentNode; <br /> var password=document.createElement("input"); <br /> password.type="password"; <br /> p.replaceChild(password,this); <br /> window.setTimeout(function(){password.focus()},50); <br /> } <br /> } <br /> window.onload=init; <br /> </script> <br> <br> <br> <br> <input> <br> <br> <br> 呵呵 想了个很龌蹉的方法 <p class="sougouAnswer"> 楼主,你这样做,当点击标签时,输入框获得焦点没问题,但那个输入位置会在便签后? <br> <br> 如果你只是为了得到界面的效果(提示文字在输入框中)你可以把输入框的表框去掉,直接显示li的表框(制造输入框效果)。 </p> <p class="sougouAnswer"> 上面的"表框"打错了,应该为“边框”,不知我是否对需求理解有偏差。望撸主回复 </p> <p class="sougouAnswer"> 楼上的朋友:我说的lable标签层是在input标签层之上,当用户进入输入状态时lable标签中的值为空,显示的汉字已经没有了。所以不会出现你的说效果,只是我画的图有点问题。 </p> <p class="sougouAnswer"> 不错 支持 </p></label></label></label></label></label></label>