回忆之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 ...
随机推荐
- ad 差分布线 等长布线
差分要素: 1.原理图差分对名字后缀必须是 _n _p 2.规则改动 定义差分线宽和间距
- Mysql使用存储过程快速添加百万数据
前言 为了体现不加索引和添加索引的区别,需要使用百万级的数据,但是百万数据的表,如果使用一条条添加,特别繁琐又麻烦,这里使用存储过程快速添加数据,用时大概4个小时. 创建一个用户表 CREATE TA ...
- SQL 练习2
查询同时存在" 01 "课程和" 02 "课程的情况 分析:分别先查询出包含有01课程和02课程 SELECT * from sc WHERE cid='01' ...
- ubuntu20.04 apache2 配置安装ssl证书
1. 获取SSL证书 根据自己的网站服务器来获取不同的ssl证书,我的服务器是ubuntu20.04. 证书如下: 00_***.key ## 私钥文件 01_CERTIFICATE_***_***. ...
- 在Asp .net core 中通过属性映射实现动态排序和数据塑形
目录 属性映射服务实现 动态排序 数据塑形 属性映射服务实现 public class PropertyMappingValue { public IEnumerable<string> ...
- 安装 iperf和服务器之间测速
安装 # https://downloads.es.net/pub/iperf/iperf-3.1.3.tar.gz wget https://iperf.fr/download/source/ipe ...
- Linux md5sum校验文件完整性
使用场景: 远程备份大文件,防止网络异常断开,文件备份不完整,使用md5校验其完整性. 1. 获取文件md5值 [root@kvm-123 gitlab]# md5sum 1564248991_20 ...
- C语言 windows下Ansi和UTF-8编码格式的转换
当我们使用MinGW-w64作为编译器在windows系统环境下进行C语言编程时,如果源代码文件(.c)保存格式为Ansi格式,则在打印汉字时不会出现乱码:反之,如果我们使用UTF-8格式保存,则会出 ...
- Ubuntu 16.04 LTS 64位系统 安装Docker
本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队 ...
- 【GIS】点图层符号的方向和大小
方向:根据属性字段设置点图层中每个要素的符号方向和大小, 1 所有要素使用同一种符号---简单渲染 在图层属性---符号系统---单一符号中进行设置,首先设置符号,在后面的[高级]选项按钮中分别设置[ ...