欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 经验分享 > Jquery > input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

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

2018-05-14 568 收藏 0 赞一个 0 真差劲 0 去评论

input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图

输入框默认状态:

20150226092608_16207.png

输入框获取焦点状态:

20150226092626_17374.png

大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示。是不是很常见?很多搜索、登录、表单都会用到这个效果,但是我看了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

Html代码:

<div><input type="text" value="提示测试" class="input_test"/></div>
<div><input type="text" value="请输入搜索关键" class="input_test"/></div>

jQuery代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   
<script type="text/javascript">   
$(function(){   
$('.input_test').bind({   
focus:function(){   
if (this.value == this.defaultValue){   
this.value="";   
}   
},   
blur:function(){   
if (this.value == ""){   
this.value = this.defaultValue;   
}   
}   
});   
})   
</script>

只要在实现的input输入框加上”input_test”这个class就可以轻松实现了

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论