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

大家可以看效果图的搜索输入框,默认显示着“用户名/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就可以轻松实现了

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)的更多相关文章

  1. js控制ios端的input/textarea元素失去焦点时隐藏键盘

    同事在测试产品时发现这样一个:“某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去” 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测 ...

  2. Js控制iphone端的input/textarea元素失去焦点时隐藏键盘

    原文http://www.it165.net/pro/html/201404/12672.html function objBlur(obj, time){ if(typeof obj != 'str ...

  3. easyui-tabs图标(获取焦点时显示图标,失去焦点时隐藏图标)

    获取焦点时显示图标,失去焦点时隐藏图标 <script type="text/javascript"> $('#_progress').tabs({ onSelect: ...

  4. H5中input输入框tppe为date时赋值(回显)

    1.当时间为2013-09-05时正常显示 <input class="form-control" name="applytime" type=" ...

  5. input 输入框默认获得焦点

    JavaScript实现默认焦点: 如下写<body>标签: <body onload="window.formLogin.user.focus()"> & ...

  6. input输入框focus获得焦点边缘发亮

    从某个插件上摘下来的代码 <html> <head> <title> New Document </title> <style> texta ...

  7. input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

  8. input输入框只允许输入数字/ 数字+小数点/ 文字+字母/ 等解决方法

    1.只允许输入数字: <input type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'') ...

  9. Echarts无数据时只显示文字不显示动画

    只需要在option中加入如下代码即可: noDataLoadingOption: {                        text: '暂无数据',                     ...

随机推荐

  1. AngularJs(三) deployd 服务的使用

    使用服务建立数据 在AngularJS(二)中,我搭建好了deployd服务,现在启动服务,创建正在的数据(开始是使用模拟数据),使用cmd命令 一.开启Mongodb数据. 贴图: 二:测试是否正常 ...

  2. Mysql Cluster 集群 windows版本

    VM1:192.168.220.102 管理节点(MGM) VM2:192.168.220.103 数据节点(NDBD1),SQL节点(SQL1) VM3:192.168.220.104 数据节点(N ...

  3. leetcode LRU Cache python

    class Node(object): def __init__(self,k,x): self.key=k self.val=x self.prev=None self.next=None clas ...

  4. php 封装Mysql数据库操作类

    花了点时间写了个基于php5.3的Mysql类 $mysql = new Mysql('host','user','pass','db') bool Mysql::insert("表&quo ...

  5. css透明背景兼容方案

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...

  6. Android API在不同版本系统上的兼容性

    随着安卓版本的不断更新,新的API不断涌出,有时候高版本的API会在低版本crash的. 如果minSdkVersion设置过低,在build的时候,就会报错(Call requires API le ...

  7. SharedPreferences最佳实践

    转:http://blog.csdn.net/xushuaic/article/details/24513599 笔记摘要:该文章是我在Android Weekly中看到的,以前也一直用SharedP ...

  8. 正选反选JS

    JS <script> window.onload=function(){ var oTher=document.getElementById('other'); var oCheck=d ...

  9. binwalk windows安装和使用方法

    binwalk是一个文件的分析工具,旨在协助研究人员对文件进行分析,提取及逆向工程.简单易用,完全自动化脚本,并通过自定义签名,提取规则和插件模块,还重要一点的是可以轻松地扩展. 以上是binwalk ...

  10. [原创]使用GCC创建 Windows NT 下的内核DLL

    原文链接:使用GCC创建 Windows NT 下的内核DLL 在温习<<Windows 2000 Driving>>分层驱动程序一章的时候,看到了关于紧耦合驱动连接方式,这种 ...