input 输入框获得/失去焦点时隐藏/显示文字
- - CSDN博客Web前端推荐文章这个标题可能比较拗口不好理解，但是我相信所有的人都见过这个效果，大家可以看本站右上角的搜索输入框，默认显示着“输入搜索内容”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“输入搜索内容”的提示. 很多搜索、登录、表单都会用到这个效果，但是我看了N多个网站，有90%以上是这么实现的：.
input 输入框获得/失去焦点时隐藏/显示文字
标签：
input
失去
焦点
| 发表时间：2013-04-01 21: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);
}
}
});
})
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 失去 焦点] 推荐：
IE6/7下移除button、input 默认边框和去掉焦点线
- - CSDN博客推荐文章. 通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉. 实现方式二：设置CSS，并使用滤镜：.
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表单元素的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名用户就某一主题展开讨论的定性调研方法，在用户研究工作中被广泛应用于用户需求调研、产品功能挖掘、产品原型设计和用户建模中. 焦点小组的组织是一项比较细致的工作，需要组织考虑诸多可能影响数据结果的因素，如用户的选取、过程设计及主持技巧等.
获得 失去 等待
- Shearer - 生活频道 与同龄男生的恋爱，付出与得到不成正比，除非坚持到结婚生子，不然就是枉替他人做嫁衣：陪着他从毛头小子的青涩、贪玩、放荡不羁、好高鹜远、情绪激烈. 加上女生大都早熟，于是心甘情愿要去身兼多重角色，知己、女友、姐姐、保姆....但是对于初涉人世的女孩，每每做好其中一样都竭尽心力，气喘吁吁，加上女生天生就是感性处事，于是为了爱的那个人，对自己更是积极的修补、加持.
Julian Assange失去自传的控制权
- SotongDJ - Solidot去年12月，Wikileak创始人Julian Assange与英国图书出版商Canongate Books签署了价值超过100万英镑的自传出版协议. 但现在，Assange失去了对自传的控制，出版商宣布将出版未授权的自传，原因据说是Assange退缩了，担心内容会自证其罪，于是终止了合同，但未能退还50万英镑的预付款，内部消息是这笔钱花在性侵犯诉讼上.