【实例简介】手机网页登录注册自适应模版
【实例截图】
注册页面
---------------------------下面是 登陆页面------------------
【核心代码】
$(function() {
$(".input-close").hide();
displayPwd();
remember();
showActionError();
autoHeight_login();
dispValidateCode();
displayClearBtn();
setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码
});
//是否显示清除按钮
function displayClearBtn(){
if(document.getElementById("username").value != ''){
$("#username").siblings(".input-close").show();
}
if(document.getElementById("password").value != ''){
$(".ciphertext").siblings(".input-close").show();
}
if($("#codeLevel").val()!="" && $("#codeLevel").val()!='0'){
if($("#validateCode").val()!=""){
$("#validateCode").siblings(".input-close").show();
}
}
}
//清除input内容
$('.input-close').click(function(e){
$(e.target).parent().find(":input").val("");
$(e.target).hide();
$($(e.target).parent().find(":input")).each(function(i){
if(this.id=="ptext" || this.id=="password"){
$("#password").val('');
$("#ptext").val('');
}
});
});
//设置password字段的值
$('.txt-password').bind('input',function(){
$('#password').val($(this).val());
});
//显隐密码切换
function displayPwd(){
$(".tp-btn").toggle(
function(){
$(this).addClass("btn-on");
var textInput = $(this).siblings(".plaintext");
var pwdInput = $(this).siblings(".ciphertext");
pwdInput.hide();
textInput.val(pwdInput.val()).show().focusEnd();
},
function(){
$(this).removeClass("btn-on");
var textInput = $(this).siblings(".plaintext ");
var pwdInput = $(this).siblings(".ciphertext");
textInput.hide();
pwdInput.val(textInput.val()).show().focusEnd();
}
);
}
//一个月免登陆切换
function remember(){
$("#rememberMe").toggle(
function(){
$(this).removeClass("login-free-selected");
$('#remember').val("false");
},
function(){
$(this).addClass("login-free-selected");
$('#remember').val("true");
}
);
}
//监控用户输入
$(":input").bind('input propertychange', function() {
if($(this).val()!=""){
$(this).siblings(".input-close").show();
}else{
$(this).siblings(".input-close").hide();
}
});
