输入框去除默认的文字,jquery方法
需求:所有的输入框获取焦点时,去掉默认的提示文字,失去焦点时如果输入框为空,恢复默认的提示文字。
解决方案: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方法的更多相关文章
- jQuery自定义组件——输入框设置默认提示文字
		
if (window.jQuery || window.Zepto) { /** * 设置输入框提示信息 * @param options * @author rubekid */ var setIn ...
 - <input>/<textarea>输入框设置默认提示文字(隐藏式)
		
html代码如下: <tr> <td>签 名:</td> <td><input type="text" nam ...
 - input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
		
input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...
 - js与jquery实时监听输入框值的oninput与onpropertychange方法
		
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
 - 形行色色的下拉菜单(HTML/CSS JS方法  jQuery方法实现)
		
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
 - JQuery方法总结
		
JQuery方法总结 Dom: Attribute:(属性) $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img"). ...
 - 手机端实现6位短信验证码input输入框效果(样式及代码方法)
		
微信移动端4位.6位.多位验证码密码输入框功能的实现代码,实现思路: 方案1: 写一个简单的input框. 评估:样式不好看,待定. 方案2: 就是用6个input框,每输入一个数字之后,切换到下一个 ...
 - .Net 序列化(去除默认命名空间,添加编码)
		
1.序列化注意事项 (1).Net 序列化是基于对象的.所以只有实例字段呗序列化.静态字段不在序列化之中. (2)枚举永远是可序列化的. 2.XML序列化时去除默认命名空间xmlns:xsd和xmln ...
 - 1.4 jQuery方法,JSON介绍
		
jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...
 
随机推荐
- Log4j 使用
			
源博客 http://www.cnblogs.com/alipayhutu/archive/2012/06/21/2558249.html#3159794 [1]从零开始 a). 新建Java Pro ...
 - Android无线测试之—UiAutomator UiSelector API介绍之八
			
对象搜索—特殊属性.节点与资源ID 一.特殊属性定位对象相关API 返回值 API 描述 UiSelector checkableboolean val) 是否可选择,一般开关组件上具有checkab ...
 - LeetCode Problem 136:Single Number
			
描述:Given an array of integers, every element appears twice except for one. Find that single one. Not ...
 - kubectl工具的windows安装方法
			
1.首先安装Chocolatey 参考:https://chocolatey.org/install#install-with-powershellexe windows7+以上操作系统的cmd sh ...
 - Sublime Text 3如何快速生成HTML5的头部信息和常用的快捷键
			
一.快速生成HTML5的头部信息的步骤: 1.Ctrl + N,新建一个文档: 2.Ctrl + Shift + P,打开命令模式,再输入 sshtml 进行模糊匹配,将语法切换到html模式: 3. ...
 - springboot之修改内置tomcat配置项
			
1.spring boot默认端口号是8080,如果要修改端口的话,只需要修改application.properties文件,在其中加入 例如: server.port=8081 2.在正常的项目中 ...
 - python系列二:python3基本数据类型
			
#标准数据类型——number(数字)a, b, c = 1, 2.2, "hello"print(a, end = ", ")print(b, end = & ...
 - 解决windows server 2003不识别移动硬盘
			
解决windows server2003不显示移动硬盘的问题: 1.进入命令提示符环境(也就是DOS) 2.进入DISKPART程序 3.输入AUTOMOUNT ENABLE指令 4.输入OK 下次U ...
 - MySQL版本与工具
			
MySQL各个版本区别 MySQL 的官网下载地址:http://www.mysql.com/downloads/ 在这个下载界面会有几个版本的选择. 1. MySQL Community Serve ...
 - javascript之冒泡排序
			
Array.prototype.bubble = function () { var temp; //第1轮比较求第一,第二轮求第二,以此类推(i<=数组成员的个数); for (var i = ...