当前位置: 编程技术>jquery
jquery input输入框获得与失去焦点时显示、隐藏文字的小例子
来源: 互联网 发布时间：2014-09-03
本文导语: 看了N多个网站，有90%以上是这么实现的： 非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。 原因在于： 1、完全没有复用性可言，如果是个表单，输入框很多...
看了N多个网站，有90%以上是这么实现的：
非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。
原因在于：
1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？
2、如果要修改其中的提示文字，费时费力又不好维护。
3、倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。
借助jquery可以实现同样的效果，而且既有复用性，又好维护，又不需要把 js 写进 html中。
用jquery实现 input输入框获得与失去焦点时显示、隐藏文字的代码。
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);
}
}
});
})
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);
}
}
});
})
就是这样了，用jquery来实现焦点内容切换，还是很方便的啦。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。