做一个简单的登录页面,要求是默认状态下,用户名和密码框有提示输入内容,当点击时,文字被清空。
对于密码框来说,默认状态时"请输入密码",当点击输入框时,内容消失,此时可以输入密码,要求密码type=“password”,即输入密码为隐藏内容。解决方法是设置两个输入框,一个type=“text”,一个为type=“password”,通过调用不同输入框来达到效果。
<script type="text/javascript" src="${staticWebsite}js/jquery-1.8.0.js"></script>
<script>
$(function(){
//对用户名框进行操作
$("#userName").focus(function(){ //用户名框获得鼠标焦点
var txt_value = $(this).val(); //得到当前文本框的值
if(txt_value==this.defaultValue) {
$(this).val(""); //如果符合条件,则清空文本框内容
}
$(this).addClass("focus");
});
$("#userName").blur(function(){ //用户名框失去鼠标焦点
var txt_value = $(this).val(); //得到当前文本框的值
if(txt_value=="") {
$(this).val(this.defaultValue); //如果符合条件,则设置内容
}
$(this).removeClass("focus");
})
//对密码框进行操作
var $pwd_text=$("#pwd_text");
var $password=$("#password");
$password.hide();
$pwd_text.focus(function(){
if($pwd_text.val()=="请输入密码")
$pwd_text.remove();
$password.show().focus();
// $pwd_text.hide();
$password.show();
}
$($password).addClass("focus");
});
$password.blur(function(){
if($password.val()==""){
$password.hide();
$pwd_text.show();
}
$(this).removeClass("focus");
});
});
</script>
jsp页面部分代码如下:
<input type="text" id="userName" name="userName" size="20" value="请输入用户名">
<input type="text" id="pwd_text" name="password" size="20" value="请输入密码">
<input type="password" id="password" name="password" size="20" value="">
<input type="submit" id="button" name="button" value="登录">
分享到:
相关推荐
主要介绍了jQuery 禁止表单用户名、密码自动填充功能,需要的朋友可以参考下
jquery ajax验证用户名是否存在几种方式,包括text,json,xml
使用JQuery框架校验重复用户名,通过js代码调用jquery方法,更简便的实现无刷新功能
VS2008下C#代码运用jQuery的AJAX功能无刷新验证用户名,验证成功后将信息带回。两种方式实现,一种直接用get实现,一种使用ashx代码实现。
一款jQuery登录插件,当用户名或密码错误时,登录框左右摇摆,各位可以根据自己的需要进行更改后直接使用
jQuery 验证用户名是否存在 jQuery 验证用户名是否存在
php与jquery校验用户名php与jquery校验用户名
使用Ajax和jQuery技术做的校验用户名的例子,。适合初学者参考
今天小编就为大家分享一篇关于使用jquery的cookie实现登录页记住用户名和密码的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
仿淘宝网、阿里云登录界面的静态界面,采用密码输入和扫码切换登录方式,模板内涵CSS,使用jquery方式实现切换,纯粹的切换界面。
jQuery之Cookie用法:记住用户名和密码实例,已打包为demo,欢迎大家下载(最火软件站)。 jquery中实现cookie的操作相比js要简单很多 操作步骤如下 1、引入JS文件(下载包中已包含) jquery-1.7.1.js jquery.cookie...
jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)
Struts2+jquery.validate框架实现用户名是否存在
这个例子使用了jQuery来验证用户名长度邮箱格式
使用JQuery的方式,在注册页面校验用户名是否已经存在,并作出提示。 我的博文中有预览图,博客路径:https://blog.csdn.net/qq_36654606/article/details/86650080
主要介绍了JQuery实现记住用户名和密码的方法,需要的朋友可以参考下
主要介绍了通过jquery.cookie.js实现记住用户名、密码登录功能,通过Cookies让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;具体实现过程大家通过本文一起看看吧
此资源介绍了如何使用JQuery来验证文本框的内容。值得JQuery的初学者参考。
jQuery表单用户登陆密码提示信息框。 演示地址:http://www.xwcms.net/js/bddm/57418.html
网上大多例子,都没写后台的。前台用的是jquery ,数据库就一张表,自己建下,适合初学者。例外有更好的代码,求分享思路。毕竟我是渣渣