教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jquery input输入框获得与失去焦点时显示、隐藏文字的小例子

jquery input输入框获得与失去焦点时显示、隐藏文字的小例子

发布时间:2015-11-17   编辑:jiaochengji.com
使用jquery实现如下的功能:搜索输入框,默认显示“输入搜索内容”的提示,当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)三者分离,这才是一个好的页面。

借助jquery可以实现同样的效果,而且既有复用性,又好维护,又不需要把 js 写进 html中。

用jquery实现 input输入框获得与失去焦点时显示、隐藏文字的代码。

1、html 部分:
<input type="text" id="input_test" value="input 提示测试" />

2、引入 jQuery:
<script type="text/javascript" src="/js/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);
            }
        }
    });
})

就是这样了,用jquery来实现焦点内容切换,还是很方便的啦。

您可能感兴趣的文章:
jquery input输入框获得与失去焦点时显示、隐藏文字的小例子
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
jQuery 表单验证扩展代码(一)
jquery获取焦点和失去焦点事件代码
Jquery实现获取焦点、失去焦点的代码
文本框获得焦点与失去焦点实现代码
jQuery限制只能输入数字与失去焦点获取焦点
Jquery显示、隐藏元素以及添加删除样式
JavaScript共有的表单字段方法

关键词: input  获得焦点  失去焦点  输入框   
[关闭]
~ ~