<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://localhost/jss/jquery-1.4.2.min.js"></script>
<style type="text/css">
.ff {
color: white;
}
.tips{
color: #999;
}
</style>
</head>
<body bgcolor="black" style="margin: 0px;">
<div id="main_container">
<form id="idform">
<table style="margin-left: 100px;">
<thead>
<tr>
<td colspan="2" align="center">
<span class="ff" style=" font-size: 23px; font-weight: bold;">登录</span>
</td>
</tr>
</thead>
<tbody align="left">
<tr>
<th><span class="ff">用户名：</span></th>
<td align="center"><INPUT id="u3" style="width: 190px;" tabindex="1" placeholder="请输入用户名" name="username" type="text" maxlength="20"></td>
</tr>
<tr>
<th><span class="ff">密 码：</span></th>
<td align="center"><INPUT id="u4" style="width: 190px;" name="passwd" type="password" tabindex="2" placeholder="请输入密码" maxlength="20">
<input id="showPwd" class='tips' style="width: 190px;" class="txt" type="text" value="请输入密码" tabindex="2" />
</td>
</tr>
<tr><td>
<br>
</td><td>
<br>
</td></tr>
<tr >
<td align="right">
<INPUT id="u5" type="button" class="u5 " value="提交">
</td>
<td style="padding-left: 0px;">
<INPUT id="u6" type="reset" class="u6 " value="重置">
</td>
</tr>
</tbody>
</table>
</form>
</div>
<script type="text/javascript">
$(function(){
var showPwd= $('#showPwd'),pwd = $('#u4');
if(!$.browser.mozilla){ //其他下使用这种方式,FF浏览器可以用用HTML5的placeholder
tips($('#u3'),'请输入用户名');
pwd.hide();
showPwd.show();
pwd.blur(function(){
if(pwd.val() == ''){
showPwd.show();
pwd.hide();
}
});
showPwd.focus(function(){
pwd.show().focus();
showPwd.hide();
});
}else{
showPwd.hide();
}
});
var tips = function(id,tipmsg){
var tips = tipmsg;
id.val(tipmsg).addClass('tips');
id.focus(function(){
if(id.val() == tips) {
id.val('').removeClass('tips');
}
}).blur(function(){
if(id.val() == tips || id.val() == '') {
id.val(tips).addClass('tips');
}
}).keydown(function(){
if(id.val() == tips) {
id.val('').removeClass('tips');
}
});
}
$("#u3,#u4").bind('keydown',function(event){
if (event.keyCode == 13) {
$('#u5').click();
}
});
</script>
</body>
</html>
分享到：
相关推荐
但是在不支持html5的低版本的浏览器中，placeholder属性是无效的，为了解决这个问题，因此，人为的去实现placeholder属性： 复制代码代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if...
placeholder属性的出现使input输入框不再单调，而且可以对用户做一个对输入内容的提醒或者指引，起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性，这就让人很恼火呀，毕竟中国还有好多人用的是IE9及以下...
考虑到不同设备的屏幕尺寸，表单应采用响应式设计，使用媒体查询（`@media`）来调整在不同屏幕大小下的布局。 五、表单验证 1. HTML5内置验证：利用`required`、`pattern`等属性进行基本的客户端验证，减少无效提交...
* 行内元素设置width、height无效，margin上下无效，padding上下无效 三、HTML5新特性 1. 语义化标签：header、footer、section、nav、aside、article 2. 增强型表单：input新增了多个type 3. 新增表单元素：...
在实际开发中，选择哪种实现方式取决于项目需求、兼容性和用户体验的考虑。例如，如果项目主要针对现代浏览器且对JavaScript有依赖，可以选择JavaScript/jQuery方法；如果需要服务器端验证，那么服务器控件扩展或ASP...
在Web开发中，表单验证是不可或缺的一部分，它确保了用户提交的数据符合预期的格式和标准，从而防止无效数据的输入。jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能和插件来简化这一过程。EasyValidator ...
总的来说，jQuery formValidator2.2.4定制样式版不仅提供了一种高效、易用的表单验证解决方案，还兼顾了视觉美感，使用户在享受功能的同时，也能体验到良好的界面设计。在实际项目中，开发者可以根据具体需求进一步...
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术是不可或缺的一部分，它允许我们在不刷新整个页面的情况下与服务器进行异步数据交换。本文将详细介绍如何利用AJAX提交表单的完整流程，以实现更加流畅...
### Web前端笔试面试知识点详解 ... position:fixed在android下无效？** - 确保浏览器版本支持。 - 使用`position: sticky`作为备选方案。 **41. 动画最小时间间隔？** - 一般建议不小于`16ms`（大约60FPS）。
`jquery信用卡验证插件Card`通常与现代浏览器兼容，但可能在旧版本的IE浏览器上存在问题。为了确保广泛兼容性，可以考虑结合使用polyfills或更新的前端框架，如React或Vue。 总结，`jquery信用卡验证插件Card`是一...
1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper ...
Ajax，即异步JavaScript和XML，是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。在本场景中，我们利用Ajax来验证用户输入的用户名是否已在系统中存在，从而提高用户体验，避免无效的注册操作。 首先，...