密码框显示提示文字jquery示例

代码如下:

<html>
<head>
<title>登录</title>
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$(".text_login").focus(function(){
if($(this).val()=='user name' || $(this).val()=='password'){
$(this).val('');
}
if($(this).attr('id')=='password1'){
$(this).hide();
$('#password2').show();
$('#password2').focus();
}
});
$(".text_login").blur(function(){
if($(this).attr('id')=='password2' && $(this).val()==''){
$(this).hide();
$('#password1').show();
$('#password1').val('password');
}
else if($(this).attr('id')=='uname' && $(this).val()=='' ){
$(this).val('user name');
}
});
});
</script>
</head>

<body>
<table cellpadding="0" cellspacing="0" class="tb_login" border="0">
<tr>
<td> 账号:</td>
<td>
<input type="text" name="uname" value="user name" id="uname" class="text_login"/>
</td>
</tr>
<tr>
<td> 密码:</td>
<td>
<input type="text" value="password" id="password1" class="text_login"/>
<input type="password" id="password2" style="display:none;" class="text_login"/>
</td>
</tr>
</table>
</body>
</html>

(0)

相关推荐

  • jQuery输入框密码的显示隐藏【代码分享】

    效果图: 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>jQuery输入框密码显示隐藏代码</title> <!--手机端需要添加--> <meta name="viewport" content="width=device-widt

  • jquery 实现密码框的显示与隐藏示例代码

    复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#chk").bind({ click: function(){ if($(this).

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样

  • 密码框显示提示文字jquery示例

    复制代码 代码如下: <html> <head> <title>登录</title> <script type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".text_login").focus(function(

  • JavaScript实现的文本框placeholder提示文字功能示例

    本文实例讲述了JavaScript实现的文本框placeholder提示文字功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JS文本框placeholder提示</titl

  • 基于JS实现html中placeholder属性提示文字效果示例

    本文实例讲述了基于JS实现html中placeholder属性提示文字效果.分享给大家供大家参考,具体如下: 如何通过js实现html的placeholder属性效果呢 我们需要这样做: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS实现placeholder属性效果</title> <script>

  • JavaScript实现输入框(密码框)出现提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • JavaScript如何实现在文本框(密码框)输入提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • js实现input密码框显示/隐藏功能

    JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display:

  • IE下支持文本框和密码框placeholder效果的JQuery插件分享

    很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar 实现代码如下: 复制代码 代码如下: (function($) {   /**    * 没有开花

  • 如何实现修改密码时密码框显示保存到cookie的密码

    只要在input框中加入AUTOCOMPLETE="OFF" 即可 复制代码 代码如下: <input name="pwd" id="password" type="password" class=" required" AUTOCOMPLETE="OFF" />

  • django admin search_fields placeholder 管理后台添加搜索框提示文字

    本文主要介绍了django admin search_fields placeholder 管理后台添加搜索框提示文字,分享给大家,具体如下: 如图, Django admin后台生成的搜索框, 默认是没有提示文字的, 不够友好; 网上也没搜到什么好的示例, 于是自己动手实现了一个 0. 已经存在的app名为carousel, 大致相当于如下操作/代码 $ python manage.py startapp carousel # settings.py ``` INSTALLED_APPS =

  • input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5

随机推荐