文本框输入值文字消失代码,JS代码库,德仔网

代码语言

代码分类

【JS】文本框输入值文字消失

作者:沉淀岁月 / 发布于2013/9/13/ 895


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>登录提示框</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	 <script type="text/javascript">
	$(document).ready(function () {
	 $("#TxtUserName").focus(function () {
	 $(this).attr({ style: "border-color:#FFA91A;" });
	 if ($(this).val() == "用户名")
	 $(this).attr("value", "");
	 $(this).attr({ style: "color:#653C31;" });
	 });
	 $("#TxtUserName").blur(function () {
	 $(this).attr({ style: "border-color:#c1c1c1;" });
	 if ($(this).val() == "") {
	 $(this).attr("value", "用户名");
	 } else {
	 $(this).attr({ style: "color:#653C31;" });
	 }
	 });
	
	 $("#TxtPassword").blur(function () {
	 if ($(this).val() == "") {
	 $(this).attr({ style: "display:none" });
	 $("#userpwd_a").attr({ style: "display:" });
	 $("#userpwd_a").attr("value", "密码");
	 }
	 else {
	 $(this).attr({ style: "border-color:#c1c1c1;color:#653C31;" });
	 }
	 });
	
	 $("#userpwd_a").focus(function () {
	 if ($("#TxtPassword").val() == "") {
	 $(this).attr({ style: "display:none" });
	 $("#TxtPassword").attr({ style: "border-color:#FFA91A;display:" });
	 $("#TxtPassword").val("");
	 $("#TxtPassword").focus();
	 } else {
	 $(this).attr({ style: "display:none" });
	 $("#TxtPassword").attr({ style: "border-color:#FFA91A;display:" });
	 $("#TxtPassword").focus();
	 }
	 });
	 $("#TxtPassword").focus(function () {
	 $(this).attr({ style: "border-color:#FFA91A;color:#653C31;" });
	 $(this).attr("value", "");
	 });
	
	
	
	 });
	 </script>
	</head>
	
	<body>
	<div class="outbox">
	 <ul class="login">
	 <li style="position:relative;">
	 <input class="username" type="text" value="用户名" maxlength="24" id="TxtUserName"/>
	 </li>
	 <li>
	 <input type="text" id="userpwd_a" class="userpwd" value="密码" maxlength="24" />
	 <input class="userpwd" type="password" value="" maxlength="24" id="TxtPassword" style="display:none"/>
	 </li>
	 </ul>
	</div>
	</body>
	</html>

试试其它关键字

　文字消失　

同语言下

可能有用的

沉淀岁月贡献的其它代码(39)