需求:所有的输入框获取焦点时,去掉默认的提示文字,失去焦点时如果输入框为空,恢复默认的提示文字。

解决方案:jquery方法,以下有三种,按照利弊,我建议最后一种。

先看html代码:

<input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"/> <br/><br/>

方法一:

$(function(){
$('#address').focus(function(){
if($(this).val()== "请输入邮箱地址"){
$(this).val("");
}
}); $('#address').blur(function(){
if($(this).val()==""){
$(this).val("请输入邮箱地址");
}
});
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
}) })

方法一中分别针对两个input,设置不同的id,进行分别的获取焦点和失去焦点的操作。原理没错,可扩展性太差,代码冗余,可升级为第二种方法,如下:

方法二:

$(function(){
$('input').bind({
focus:function(){
var input_value=$(this).val();
if(input_value == this.defaultValue){
$(this).val("");
}
},
blur:function(){
var input_value=$(this).val();
if(input_value == ""){
$(this).val(this.defaultValue);
} }
})
})

优势是:通过input绑定了这个页面内所有的输入框,不需要每一个去设定操作。用bind绑定了失去焦点和获取焦点的操作,并且,用this.defaultValue代替了输入框内默认的文字,比米娜了因为默认文字的不同而单独去设置,减少了代码量。同事建议说,

this.defaultValue  还可以用html5里面新增加的新属性placeholder 或者  是在input内随意设置属性aa来实现,并且还可以延伸至验证输入框内的电话号码,身份证,以及用户名等,需要用到正则。目前还没有运用到,有机会补充。

<input type="text" id="address" value="" aa="请输入邮箱地址"/>

第三种方法:

$(function(){

$('input:text').each(function(){
var input_text = $(this).val();
$(this).focus(function(){
if(input_text === $(this).val()) $(this).val(''); })
$(this).blur(function(){
if($(this).val() == "") $(this).val(input_text); })
}) });

这是目前在我看来比较精简的最佳方案,为了能在多个页面内的input都适用,建议将过滤选择器,设置为统一的class名,这样只需要在公用js文件内,写一次就可全站使用。

输入框去除默认的文字,jquery方法的更多相关文章

  1. jQuery自定义组件——输入框设置默认提示文字

    if (window.jQuery || window.Zepto) { /** * 设置输入框提示信息 * @param options * @author rubekid */ var setIn ...

  2. <input>/<textarea>输入框设置默认提示文字(隐藏式)

    html代码如下: <tr>    <td>签   名:</td>    <td><input type="text" nam ...

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

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

  4. js与jquery实时监听输入框值的oninput与onpropertychange方法

    文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...

  5. 形行色色的下拉菜单(HTML/CSS JS方法 jQuery方法实现)

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. JQuery方法总结

    JQuery方法总结 Dom: Attribute:(属性) $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img"). ...

  7. 手机端实现6位短信验证码input输入框效果(样式及代码方法)

    微信移动端4位.6位.多位验证码密码输入框功能的实现代码,实现思路: 方案1: 写一个简单的input框. 评估:样式不好看,待定. 方案2: 就是用6个input框,每输入一个数字之后,切换到下一个 ...

  8. .Net 序列化(去除默认命名空间,添加编码)

    1.序列化注意事项 (1).Net 序列化是基于对象的.所以只有实例字段呗序列化.静态字段不在序列化之中. (2)枚举永远是可序列化的. 2.XML序列化时去除默认命名空间xmlns:xsd和xmln ...

  9. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

随机推荐

  1. Django应用部署:nginx+uwsgi方式

    环境准备 nginx+uwsgi方式部署顾名思义,需要nginx和uwsgi两个软件包. nginx不用说,是必备的,关于nginx的安装本文不再赘述,详情可以自行搜索或者参考我以前的文章: Debi ...

  2. Android无线测试之—UiAutomator UiDevice API介绍七

    截图与等待空闲 一.截图和等待空闲相关知识: 1)图片缩放比例:例如图片从100像素缩小到50像素 2)图片质量:是指图片大小,质量越高图片越大,质量越低图片越小 3)File类:指的是一个文件或者一 ...

  3. PHP实现对短信验证码发送次数的限制(防机刷验证码)

    PHP实现对短信验证码发送限制(防止机刷验证码) 对用户获取短信验证码的手机号.ip.和浏览器(使用唯一标识)进行限制.本文介绍的方法是对用户每天只能通过同一浏览器或同一ip地址获取验证码10次或者同 ...

  4. 【BZOJ2186】[Sdoi2008]沙拉公主的困惑 线性筛素数

    [BZOJ2186][Sdoi2008]沙拉公主的困惑 Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M! ...

  5. Reverse and Compare(DP)

    Reverse and Compare Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement Yo ...

  6. SQL查临时表没有返回数据集

    问题描述:在SQL中可以查询到数据,返回不到页面上. 解决办法: set nocount on create table #list [转] 每次我们在使用查询分析器调试SQL语句的时候,通常会看到一 ...

  7. HUST 1354 - Rubiks (DP)

    1354 - Rubiks 时间限制:1秒 内存限制:64兆 452 次提交 102 次通过 题目描述 Isun is a genius. Not only he is an expert in al ...

  8. nginx1.4.7+uwsgi+django1.9.2项目部署,liunx系统为ubuntu14.0.4。

    本文基于root用户下进行部署,django项目名称为BDFS 1.  安装依赖包,终端输入命令 1)         环境依赖包 apt-get update apt-get install pyt ...

  9. 使用QFile进行文件操作(QFile可以使用FILE *指针,还必须指定AutoCloseHandle)

    QFile类我我们提供了操作文件的常用功能.它是一种io设备,可以用来读写文本文件和二进制文件,也可以用来读写Qt的资源文件.QFile类可以单独使用,该类本身提供了read/write函数,但更方便 ...

  10. 什么是PHP闭包???

    闭包函数:临时创建一个没有名称的函数,经常作为回调函数来用. 通俗的说就是:子函数可以使用父函数中的局部变量,这种行为叫做闭包. 1.匿名函数赋值 $demo=function($str){ echo ...