jquery 文本框点击时文字消失，失去焦点时文字出现

时间：2013-07-17 编辑：简简单单来源：一聚教程网

js实现代码：

代码如下	复制代码

我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：

1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？

2、如果要修改其中的提示文字，费时费力又不好维护。

3、我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。

那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？

相信我们都有加载 jQuery，我就基于 jQuery 写了一个方法，先看 DEMO，具体方法如下：

1、html 部分：

代码如下	复制代码

2、引入 jQuery：

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);
            }
        }
    });
})

实现的最终效果是一样一样的，或许是我个人的代码洁癖，但我相信，好代码从细节开始

代码如下	复制代码
文本框点击时文字消失，失去焦点时文字出现

上一个： js 变量、字符串、条件语句、事件学习笔记
下一个： marquee.js 多功能无缝滚动jQuery插件

推荐专题

最新下载

热门教程

jquery 文本框点击时文字消失，失去焦点时文字出现

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程