回忆之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 ...
随机推荐
- ElementUi 表单验证失败后 页面滚动到表单验证失败位置
1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...
- linux c语言学习笔记之守护进程
哈尔滨理工大学软件工程专业08-7李万鹏原创作品,转载请标明出处 http://blog.csdn.net/woshixingaaa/archive/2010/06/06/5651095.aspx 守 ...
- 自定义流式布局：ViewGroup的测量与布局
目录 1.View生命周期以及View层级 1.1.View生命周期 1.2.View层级 2.View测量与MeasureSpec类 2.1.MeasureSpec类 2.2.父View的限制 :测 ...
- STM32—TIMx实现编码器四倍频
文章目录 一.储备知识 二.TIMx的编码器模式介绍 1.计数边沿设置 2.选择极性和使能 3.使能 4.计数方向 三.代码部分 一.储备知识 通过STM32的定时器编码器接口模式对编码器进行四倍频, ...
- Centos7上yum安装mongodb(安装epel中的版本可能会比较老)
yum install epel-release 搜索mongodb-server 安装mongodb yum install mongodb-server.x86_64 配置mongodb vim ...
- Vue 插槽 slot的简单实用
- C#基础知识---迭代器与Foreach语句
一.Foreach语句简介 在C# 1.0中我们经常使用foreach来遍历一个集合中的元素,然而如果一个集合要支持使用foreach语句来进行遍历,这个集合一般需要IEnumerable或IEnum ...
- LeetCoded第25题题解--K个一组翻转链表--java--链表
链表 单链表:链表中的每个元素实际上是一个单独的对象,而所有对象都通过每个元素的引用字段链接在一起. 双链表:与单链表不同的是,双链表的每个节点都含有两个引用字段. 链表优点 灵活分配内存空间 能在O ...
- TiDB基本简介
一.TiDB整体架构 与传统的单机数据库相比,TiDB具有以下优势: 纯分布式架构,拥有良好的扩展性,支持弹性的扩缩容 支持SQL,对外暴露MySQL的网络协议,并兼容大多数MySQL的语法,在大多数 ...
- java发送短信开发，第三方接口方法
必备的三个jar包Maven有自己去下: commons-logging commons-logging 1.1 commons-httpclient commons-httpclient 3.1 c ...