js实现代码：
| 代码如下 | 复制代码 |
|
<input type="text" value="不推荐这么做" onfocus="if(this.value == '不推荐这么做') this.value = ''" onblur="if(this.value == '') this.value = '不推荐这么做'" /> |
|
我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：
1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？
2、如果要修改其中的提示文字，费时费力又不好维护。
3、我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。
那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？
相信我们都有加载 jQuery，我就基于 jQuery 写了一个方法，先看 DEMO，具体方法如下：
1、html 部分：
| 代码如下 | 复制代码 |
|
<input type="text" id="input_test" value="input 提示测试" /> |
|
2、引入 jQuery：
<script type="text/javascript" src="jquery.min.js"></script>
3、执行脚本：
| 代码如下 | 复制代码 |
|
$(function() { var inputEl = $('#input_test'), defVal = inputEl.val(); inputEl.bind({ focus: function() { var _this = $(this); if (_this.val() == defVal) { _this.val(''); } }, blur: function() { var _this = $(this); if (_this.val() == '') { _this.val(defVal); } } }); }) |
|
实现的最终效果是一样一样的，或许是我个人的代码洁癖，但我相信，好代码从细节开始
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charsetGB2312" /> <title>文本框点击时文字消失，失去焦点时文字出现 </title> </head> <body> <input type="text" value="请输入您的姓名" id="myinput" /> </body> </html> <script language="JavaScript" type="text/javascript"> function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(myinput,"click",function(){ myinput.value = ""; }) addListener(myinput,"blur",function(){ myinput.value = "请输入您的姓名"; }) </script> |
|
时间： 2024-12-30 00:53:27