input 输入框获得/失去焦点时隐藏/显示文字

标签: input 焦点 文字 | 发表时间:2013-04-01 13:36 | 作者:liweifengwf
出处:http://blog.csdn.net

这个标题可能比较拗口不好理解,但是我相信所有的人都见过这个效果,大家可以看本站右上角的搜索输入框,默认显示着“输入搜索内容”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“输入搜索内容”的提示。是不是很常见?很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:

<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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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);
            }
        }
    });
})

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

作者:liweifengwf 发表于2013-4-1 21:36:20 原文链接
阅读:84 评论:0 查看评论

相关 [input 焦点 文字] 推荐:

input 输入框获得/失去焦点时隐藏/显示文字

- - CSDN博客Web前端推荐文章
这个标题可能比较拗口不好理解,但是我相信所有的人都见过这个效果,大家可以看本站右上角的搜索输入框,默认显示着“输入搜索内容”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“输入搜索内容”的提示. 很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:.

IE6/7下移除button、input 默认边框和去掉焦点线

- - CSDN博客推荐文章
<input type="button" value="提交" class="input_btn"> <div>. 通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签,然后将样式写在这个标签上,并且把button和input的默认样式都去除掉.

HTML5中新型input类型

- - WebHek
你可能已经听说过,HTML5里引入了几种新的input类型. 在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等. 而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等.

html中input上传多个文件

- - CSDN博客Web前端推荐文章
如何使用html上传多个文件呢. 我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 不过有一个问题,只支持IE10+,连IE9都不支持,o(︶︿︶)o . 其实方法很简单<input type="file" name="upload">这样只能选择一个文件,<input type="file" multiple name="upload">这样就可以选择多个文件了,怎么样,很方便吧.

动态添加input表单元素的js代码

- - haohtml's blog
//功能:在表单中input file控件. //参数:parentID---要插入input file控件的父元素ID. // inputID----input file控件的ID,这个一定要和name保持一致的,否则会出问题. // maxNum --- 最大数量 0为不限制. alert('最多只允许添加' + maxNum + '个');.

Math Input Panel – 手写数学公式 | 小众软件 > 办公软件

- chris - 小众软件
讨厌写论文,更讨厌论文里面还有大量的公式. 一会上标、一会下标、一会积分、一会微分,有时还伴有分数等等,一起存在的话人都死了. 毕竟 Word 没有 Latex 写公式来得爽快,可惜 Latex 在“中国高校”不通用. 今天意外发现(也许是我 OUT),原来 windows 自带手写输入公式的软件,名叫 Math Input Panel ,就在开始-附件-数学输入面板可以找到.

Input Director – 一套鼠标键盘控制多台电脑 | 小众软件 > 实用工具

- 林 - 小众软件
Input Director 是款 Windows 下的一套鼠标键盘控制多台电脑工具. 小众曾介绍过 Synergy – 教你在局域网中用一套键盘/鼠标控制多台电脑,可以在跨平台的环境下用一套鼠标键盘控制多台电脑. Input Director 有着异曲同工之效. 这类软件的最大用途在于一个办公桌上同时拥有多台电脑,只需要一套鼠标键盘就可以方便的操作两台电脑,甚至可以共享剪贴板(测似成功),互相拷贝文件(测试未成功).

用研知识沉淀-焦点小组

- - IT技术博客大学习
    焦点小组(Focus Group)指在主持人的引导下,8-12名用户就某一主题展开讨论的定性调研方法,在用户研究工作中被广泛应用于用户需求调研、产品功能挖掘、产品原型设计和用户建模中. 焦点小组的组织是一项比较细致的工作,需要组织考虑诸多可能影响数据结果的因素,如用户的选取、过程设计及主持技巧等.

文字雲

- Sopp - 網絡暴民 Jacky&#39;s Blog
看到這個 HTML5 文字雲:文章詞彙分析機 ,便餵以本站之 Feed,並拍照留念.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.