`
kong0itey
  • 浏览: 299718 次
社区版块
存档分类
最新评论

在密码框显示提示文字的小技巧,兼容ie和火狐(原创)

阅读更多
<input type="text" value="邮箱/会员账号/手机号" id="username" style="width:150px;height:24px;"/>
<div id="pwd_warpper" style="width:150px;height:24px;">
<input type="text" value="请输入密码" id="_password" onfocus="showpassword();" style="width:150px;height:24px;"/>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="code.js"></script>





javascript代码code.js
function showtext() {
    if($("#password").val()=="") {
	$("#pwd_warpper").html("<input type=\"text\" value=\"请输入密码\" id=\"_password\" onfocus=\"showpassword();\" style=\"width:150px;height:24px;\"/>");
    }
}

function showpassword() {
    $("#pwd_warpper").html("<input type=\"password\" value=\"\" id=\"password\" onblur=\"showtext();\" style=\"width:150px;height:24px;\"/>");
    /**
    这里为什么要用setTimeout,因为ie比较傻,刚创建完对象,你直接设置焦点
    在ie下是不会响应的,你必须留出时间给ie缓冲下,所以加上了这个定时器
    **/
    setTimeout(function(){
	$("#password").focus();
    },20);
}

$(function(){
	var usernameDefStr = $("#username").val();
	$("#username").focus(function(){
	    if($(this).val()==usernameDefStr)
	        $(this).val("");
	});
	$("#username").blur(function(){
	    if($(this).val()=="")
	        $(this).val(usernameDefStr);
	});
	
});
分享到:
评论

相关推荐

    ASP.NET学习笔记

    五、firefox无法显示背景图片:解决方案 ASP.NET 一、 控件连接数据库 二. 从excel导入数据到数据库 比较 一、Web Application Projects和Web Site Projects两种编程模型比较 疑难问题解决 一.密码最短长度...

    JavaScript兼容浏览器FF/IE技巧

    本文给大家分享的是一个JavaScript兼容火狐浏览器与IE浏览器的一个小技巧,非常的简单实用,有需要的小伙伴可以参考下

    div+css有实例,易学易懂

    8.7.2 FIREFOX2.0 中的浮动元素和容器 8.7.3 并列浮动元素默认宽度的问题 8.8 嵌套元素宽度和高度叠中的问题 8.8.1 父元素和子元素均没有定义宽度和高度 8.8.2 定义子元素的宽度后的效果 8.8.3 定义父元素宽度后的...

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...

    JavaScript 实例 精粹 整理

    包括:11种用javascript做的刷新按钮的方法、40种Javascript中常用的使用小技巧、Javascript的IE和Firefox兼容性汇编、JavaScript函数大全、JavaScript实际应用:innerHTMl和确认提示的使用、 CSS的常用技巧、IP地址...

    css控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌

    在网页美化过程中会碰到控制div中的img为指定大小,为了不让图片变形或失真,所以只能采用等比例,本人搜集整理了一些实用技巧,需要了解的朋友可以参考下

    javascript学习资料

    js最强劲的学习资料 含JS函数集、JS_IE与Firefox兼容处理、特效网页、40种网页常用小技巧(javascript)、javascript小技巧、层布局、JS内置对象等一系列帮助学友轻松学习。

    JavaScript调试之console.log调试的一个小技巧分享

    前言 对于JavaScript程序的调试,相比于alert&#40;&#41;,使用console.log()是一种更好的方式,原因在于:alert&#40;&#41;函数会阻断JavaScript程序的执行,从而造成副作用;...//兼容Firefox/IE/Opera使用console.log

    IBM WebSphere Portal门户开发笔记01

    22、SHOWMODALDIALOG和SHOWMODELESSDIALOG及其右下角提示框 257 23、特殊字体样式 258 24、JS确认窗口和输入窗口 259 25、WINDOW.SETTIMEOUT和SETINTERVAL 260 25、WINDOW.OPEN 261 26、检查浏览器是否支持COOKIE ...

    《CSS设计彻底研究》【中文PDF+源代码】

    剖析CSS原理4大核心:盒子模型、标准流、浮动、定位创建主流流览器全兼容的网站:IE 6/UE 7/ Firefox讲解各类网页布局方法:固定宽度布局、变宽布局制作流行的网页元素:导航、菜单、圆角、面板为学习者提供:CSS...

    Html/Css(新手入门第一篇必看攻略)

    2、网页开发的小工具–火狐浏览器中的firebug工具–附加组件–搜索firebug作为web前端工作,要兼容的浏览器ie,火狐浏览器,谷歌刘浏览器,苹果浏览器等。网页是否有css样式,测试–在浏览器改变文字大小。 3、css...

    CSS网站布局实录 (第二版)PDF版

    8.3.1 安装Firefox Web Developer 8.3.2 界面总览 8.3.3 主要功能 8.4 Web Accessibilty Toolbar 8.4.1 安装工具栏 8.4.2 界面与功能总览 第9章 CSS布局应用实例解析 9.1 闪客帝国网站布局设计 9.1.1 界面设计 9.1.2...

Global site tag (gtag.js) - Google Analytics