回忆之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上搭建zookeeper服务注册中心
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...
- Git（7）-- 查看提交历史（git log 命令详解）
@ 目录 1.git clone 2.git log 3.git log -p 4.git log --stat 5.git log --pretty=oneline 6.git log --pret ...
- SpringCloud升级之路2020.0.x版-16.Eureka架构和核心概念
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford Eureka 目前 ...
- S3C2440—10.代码重定位
文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...
- 超过Numpy的速度有多难？试试Numba的GPU加速
技术背景 Numpy是在Python中非常常用的一个库,不仅具有良好的接口文档和生态,还具备了最顶级的性能,这个库很大程度上的弥补了Python本身性能上的缺陷.虽然我们也可以自己使用Cython或者 ...
- NOIP 模拟 $17\; \rm 时间机器$
题解 \(by\;zj\varphi\) 一道贪心的题目 我们先将节点和电阻按左边界排序,相同的按右边界排序 对于每一个节点,我们发现,选取左边界小于等于它的电阻中右边界大于它且最接近的它的一定是最优 ...
- JSOUP教程目录
入门: 1.解析和遍历一个HTML文档 输入: 2.解析一个HTML字符串 3.解析一个body片断 4.从一个URL加载一个Document 5.从一个文件加载一个文档 数据抽取: 6.使用DOM方 ...
- 信号量-Semaphore、SemaphoreSlim
核心类:Semaphore,通过int数值来控制线程个数. * 通过观察构造函数 public Semaphore(int initialCount, int maximumCount);: * in ...
- mzy git学习，删除文件(三)
删除一个文件(工作区删除,并且在本地版本库中也删除) 第一种方式: rm test.txt 先删除工作区的test.txt git add test.txt (我的理解是,将删除test.txt这个动 ...
- 刷题-力扣-113. 路径总和 II
113. 路径总和 II 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/path-sum-ii 著作权归领扣网络所有.商业转载请联系 ...