回忆之placeholder
直接看效果点这里
HTML
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="utf-8">
<title> Placeholder </title>
</head>
<body>
<input class="J_Placeholder" type="text" value=""/>
<textarea class="J_Placeholder"></textarea>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$('.J_Placeholder').placeholder({
'txt': '请输入提示信息'
});
</script>
</body>
</html>
JS
/**
* @description: 表单input、textarea占位提示
* @author:jununx@gmail.com
* @update: 2014/11/10
*
* @param txt{string} 提示信息语句
*
* 用法
*
* $('.J_Placeholder').placeholder({
* 'txt': '请输入提示信息'
* });
*/ ;(function($){ var methods = {
init: function(opts){
this.isHtml5Placeholder() ? this.changeHtml5Placeholder(opts) : this.changePlaceholder(opts);
},
isHtml5Placeholder: function(){
var res = 'placeholder' in document.createElement('input');
return res;
},
changePlaceholder: function(opts){
opts.that.attr('value') == '' && opts.that.attr({
'value': opts.txt
}); opts.that
.on('focus', function(){
if($(this).val() === opts.txt){
$(this).attr('value', '');
}
})
.on('blur', function(){
if($(this).val() == ''){
$(this).attr({
'value': opts.txt
});
}
});
},
changeHtml5Placeholder: function(opts){
opts.that.attr({
'placeholder': opts.txt
});
}
}; $.fn.placeholder = function(opts){
opts = $.extend({
'that': this,
'txt': ''
}, opts || {});
methods.init(opts);
return this;
}; })(jQuery);
回忆之placeholder的更多相关文章
- 【回忆1314】回忆之placeholder
直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charse ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- Placeholder如何换行
使用js动态添加标签充,处理换行问题 var placeholder = 'This is a line \nthis should be a new line'; $('textarea').att ...
- 关于input标签和placeholder在IE8，9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- 兼容IE8 input的placeholder的文字显示
if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholde ...
- input type="datetime-local" 时placeholder不显示
一个坑,input的type="datetime-local" 时,电脑上会显示提示,如图 <input type="datetime-local" na ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- UITextField的placeholder文字的位置，颜色等的自定义设置
//控制placeHolder的位置,左右缩20 -(CGRect)placeholderRectForBounds:(CGRect)bounds { CGRect inset = CGRectMak ...
- placeholder实现的两种方式
/** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...
随机推荐
- Linux虚拟机配置SSH免密登录
本环境为CentOS 7(点击镜像下载iso文件),无图界面. 启动SSH服务 在/usr/sbin/有一个文件为sshd,然后输入绝对路径/usr/sbin/sshd即可开启ssh服务. 然后输入命 ...
- SpringBoot JPA查询映射到自定义实体类
和 SegmentFault上的文章(https://segmentfault.com/a/1190000021869465)一样, 都是俺账号 场景 举一个简单的栗子: 比如有一个User实体类 @ ...
- 在JavaScript中安全访问嵌套对象
大多数情况下,当我们使用JavaScript时,我们将处理嵌套对象,并且通常我们需要安全地访问最里面的嵌套值. 比如: const user = { id: 101, email: 'jack@dev ...
- C# 如何在编译时将 dll 复制到 bin\Release 目录下
下面假设 Project 名为 Gamma4RTD,需要调用的 dll 文件为 rtddll.dll.IDE 是 Visual Studio 2015 打开 Visual Studio 2015 -& ...
- ConcurrentDictionary 并发字典
线程安全 Dictionary 本身是不支持线程安全的 线程的字典--ConcurrentDictionary 线程安全实现 写安全 以往线程安全我们通过Lock实现 比如通过lock一个全局的obj ...
- java中的静态内部类
静态内部类是 static 修饰的内部类,这种内部类的特点是: 1. 静态内部类不能直接访问外部类的非静态成员,但可以通过 new 外部类().成员 的方式访问 2. 如果外部类的静态成员与内部类的成 ...
- Java异常与异常处理
异常体系结构 1.所有异常都继承于Throwable类,其下有两大子类: (1)Error类:错误,一般编程人员不太接触,如虚拟机错误.线程死锁.硬伤:使程序崩溃 (2)Exception类:异常,编 ...
- idea项目在maven projects中显示灰色的解决办法。建新建module src变成标准的文件夹
在使用idea的过程中,有时会遇到其中一个maven模块变成灰色(可以通过view - tool windows -> maven projects 现实),如下所示: 造成这个的原因可能是忽略 ...
- Java HdAcm1069
import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Main { Lis ...
- Linux centos 安装 mysql 5.6
一.mysql下载 1.方式一(简单粗暴) 直接在linux 目录下wget https://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.43-li ...