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

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图
输入框默认状态:
 
输入框获取焦点状态:
 
大家可以看效果图的搜索输入框,默认显示着“用户名/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就可以轻松实现了
查看:Demo

时间: 2013-03-30

input 标签实现输入框带提示文字效果(两种方法)

方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5

input 和 textarea 输入框最大文字限制的jquery插件

复制代码 代码如下: /* input 和 textarea 最大文字限定插件 * 修改版, 一个中文表示1一个字, 一个英文半个字; * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields * * pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0) *

14款经典网页图片和文字特效的jQuery插件-前端开发必备

不废话了,直接贴图片了,亲们可以点击查看演示和下载源码哦. 经典1.网页图片3d旋转jQuery代码 查看演示  下载插件 经典2.存css3实现的tabl选项卡代码 查看演示 下载插件 经典3.jQuery标签旋转代码 查看演示  下载插件 经典4.鼠标悬浮的图片选项卡代码 查看演示  下载插件 经典5.鼠标往下滚动时文字变大的css3代码 查看演示  下载插件 经典6.动画标签云网页代码 查看演示  下载插件 经典7.css3文字晃动代码 查看演示  下载插件 经典8.css3幻灯片代码 查

使用jquery给input和textarea设定ie中的focus

今天在做我们的表单提交部分的时候,遇到了这个问题,于是,用传说中的jquery就可以解决了. 这里主要说的是在IE下的focus的问题,因为在firefox中是支持 复制代码 代码如下: input:focus  textarea:focus 在IE下:focus是无效的,所以,我们要在点击以后给input和textarea加上新的样式以配合实现:focus效果. 我们首先来看下效果: 来看下这个效果中的JS: <script language="javascript">

JS实现输入框提示文字点击时消失效果

本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

JavaScript实现为input与textarea自定义hover,focus效果的方法

本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n

jsp实现textarea中的文字保存换行空格存到数据库的方法

UploadNews.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt

jquery实现textarea输入框限制字数的方法

本文实例讲述了jquery实现textarea输入框限制字数的方法.分享给大家供大家参考.具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改.当然,这个也不是很完美. 复制代码 代码如下: <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv="content-type" content="text

jQuery插件EnPlaceholder实现输入框提示文字

用法: 首先在head中分别引入jQuery及本插件 <script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script> 然后就可以调用鸟 //通过value模拟placeholder $('i

实时监控input框,实现输入框与下拉框联动的实例

如图: html代码 <tr> <th scope="row">奖励类型:</th> <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />