用jquery实现输入框消失文字。
- <html>
- <head>
- <title>用jquery实现输入框消失文字</title>
- <style type=”text/css”>
- .default {
- font-weight: bold;
- color: #787878;
- }
- </style>
- <script type=”text/javascript” src=”/js/jquery/jquery-1.8.1.min.js”></script>
- <script type=”text/javascript”>
- $(document).ready(function() {
- $(“#keywords”).focus(function () {
- var $this = $(this);
- if ($this.val() == $this[0].defaultValue) {
- $this.css(“color”,”#0cf”).val(“”);
- }
- }).blur(function () {
- var $this = $(this);
- if ($this.val() == ”") {
- $this.removeAttr(“style”).val($this[0].defaultValue);
- }
- })//keywords
- });
- </script>
- </head>
- <body>
- <div id=”content”>
- <form method=”POST” id=”user” action=”">
- User Name:<input type=”text” id=”keywords” class=”default” name=”keywords” value=”Enter your name”/><br/>
- PassWord:<input type=”text” id=”password” class=”default” name=”password” value=”Enter your password”/>
- <input type=”submit” name=”sub” value=”login”/>
- </form>
- </div>
- </body>
- </html>
<html>
<head>
<title>用jquery实现输入框消失文字</title>
<style type="text/css">
.default {
font-weight: bold;
color: #787878;
}
</style>
<script type="text/javascript" src="/js/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#keywords").focus(function () {
var $this = $(this);
if ($this.val() == $this[0].defaultValue) {
$this.css("color","#0cf").val("");
}
}).blur(function () {
var $this = $(this);
if ($this.val() == "") {
$this.removeAttr("style").val($this[0].defaultValue);
}
})//keywords
});
</script>
</head>
<body>
<div id="content">
<form method="POST" id="user" action="">
User Name:<input type="text" id="keywords" name="keywords" value="Enter your name"/><br/>
PassWord:<input type="text" id="password" name="password" value="Enter your password"/>
<input type="submit" name="sub" value="login"/>
</form>
</div>
</body>
</html>

