Drupal ·

如何制作drupal“简洁登录框”

来源:似水流云博客

因为一个项目的美工设计,把登陆框做成最简洁的效果:

因为密码框会显示***,所以只能用一个text和一个password类型的input来替换已达到效果。
并且当密码框的focus和blur事件触发时,要根据不同情况判断input框里的显示内容。
因为本项目是针对Drupal系统的,所以HTML结构直接采用了drupal的相关代码,若有需求请自行
修改至标准html结构。

Drupal登陆表单生成的html结构:


<form id="user-login-form" method="post" accept-charset="UTF-8" action="/homepage?destination=homepage">
<div>
<div id="edit-name-wrapper">

<input id="edit-name" type="text" value="用户名" size="15" name="name" maxlength="60" />
</div>
<div id="edit-pass-wrapper">
<input id="edit-pass" type="password" size="15" maxlength="60" name="pass" />
</div>
<input id="edit-submit-1" class="form-submit" type="submit" value="登录" name="op" />

</div>
</form>

script脚本:

<script>
$(document).ready(function(){
var pass0=$("#user-login-form #edit-name");

var pass1=$("#user-login-form #edit-pass");

//隐藏原来的密码框
pass1.css("display","none");
//添加一个文本“密码框到div中
$("#user-login-form #edit-pass-wrapper").append("<input id='edit-pass-text' type='text' class='form-text required'     value='密码' size='15' maxlength='60' name='pass' />");

var pass2=$("#user-login-form #edit-pass-text");
//为密码框注册事件,失去焦点时,将其隐藏,将密码文本框显示
pass1.blur(function(){
if(pass1.attr("value")==null){
pass1.css("display","none");
pass2.css("display","block");
}
});
//为密码文本框注册事件,得到焦点时,将其隐藏,将密码框显示
pass2.focus(function(){
pass2.css("display","none");
pass1.css("display","block");
pass1.focus();
});
//为用户名框注册事件,失去焦点时,将value值设为 “用户名”
pass0.blur(function(){

if(pass0.attr("value")==null){
pass0.attr("value","用户名");
}
});
//为用户名框注册事件,得到焦点时,将value值设为 “”
pass0.focus(function(){
if(pass0.attr("value")== "用户名" ){
pass0.attr("value","");
}
});
});
</script>

参与评论