输入框去除默认的文字,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()方法: $("元 ...
随机推荐
- cocos2dx-3.0(前言)
说了好久,告诉自己要開始学cocos2dx(在心理里告诉了好久),然后养成良好习惯,记录自己学习cocos2dx的过程.一个是怕自己忘记.还有一个是更加让自己理解透彻(或许哪天我写的好了,组合一下出一 ...
- Intellij IDEA 搜索文件内容
位置:Edit-Find-Find in Path 把KeyMap改成Eclipse的就可以用Ctrl+H查找了.
- MPEG 编解码相关资料收集
以下是我搜集的关于MPEG1/2的编解码相关的资料: (注:mpge帧内编码是基于jpeg编码的,所以请务必先理解jpeg的编解码原理.) 1:Introduction to MPEG 2 Video ...
- 【Python】Python获取命令行參数
有时候须要用同一个Python程序在不同的时间来处理不同的文件,此时假设老是要到Python程序中去改动输入.输出文件名称.就太麻烦了. 而通过Python获取命令行參数就方便多了.以下是我写得一个小 ...
- IOS 多线程的一些总结
IOS 多线程 有三种主要方法 (1)NSThread (2)NSOperation (3)** 下面简单介绍这三个方法 1.NSThread 调用方法如下: 如函数需要输入参数, ...
- 《从零开始学Swift》学习笔记(Day 29)——访问级别
Swift 2.0学习笔记(Day 29)——访问级别 原创文章,欢迎转载.转载请注明:关东升的博客 访问级别: Swift提供了3种不同访问级别,对应的访问修饰符为:public.internal和 ...
- 获取字符串已utf-8表示的字节数
private static int utf8Length(String string) { /** Returns the number of bytes required to write thi ...
- iOS之事件的传递和响应机制
前言: 按照时间顺序,事件的生命周期是这样的: 事件的产生和传递(事件如何从父控件传递到子控件并寻找到最合适的view.寻找最合适的view的底层实现.拦截事件的处理)->找到最合适的view后 ...
- MySQL第一天
数据库课程体系 在PHP阶段,将数据库分为三个阶段: 基础阶段(就业班第一个阶段): 6天, mysql数据库的基本操作(增删改查), 以及一些高级操作(视图, 触发器,函数,存储过程等), ...
- http请求设置setConnectTimeout()方法超时无响应
相信非常多小伙伴在写 HttpURLConnection中都设置了setConnectTimeout()方法.目的就是在网络不好的情况下超时返回 然而我们设置的setConnectTimeout()并 ...