placeholder属性是html5的新增属性,当输入框为空时, 可以提示一些信息, 非常不错的功能
1. placeholder支持情况:
a) 已经支持: ie 9+ firefox 4.0+ chrome等
b) 需要模拟 : ie6 ie7 ie8 firefox3.6
2. placeholder
a) 内容为空时, 内容显示为placeholder内容, 样式为color:#999 , 且垂直居中显示
b) 内容不为空, 无特殊变化, 原有placeholder样式, 需清除
3. 模拟placeholder, 要求满足( 只考虑 input)
a) 当页面显示后, 如果数据为空, 则显示为placeholder状态
b) 当点击input后, 清除placeholder,样式恢复文本样式
c) 当input离开焦点后, 根据内容来显示placeholder状态
d) 当placeholder状态时,刷新页面后, 也应该是placeholder状态
e) 当有js执行脚本后, 且变更input值后, 重置placeholder状态
f) 当表单reset后, 也需要重置placeholder状态
g) 当表单提交后, 当为placeholder状态时,提交的参数应该为空
4. 注意点
a) firefox 3.6 ,需考虑 3.d)点, 需监停 window.onunload
b) ie下, 第3.e)点,需监控 onpropertychange事件,比较复杂
c) firefox , 需监控 oninput 事件, 也比较复杂
d) form.reset事件, onreset是在修改input值前调用的, 也比较难重置状态
5. 判断浏览器是否原生支持placeholder : "placeholder" in document.createElement("input")
6. 简单实现, 可以监停focus/blur(focusin/focusout), submit/unload事件
7. 本文发表在http://seavers.iteye.com/ 本文未经同意,谢绝转载
例:
KISSY 实现:
input.placeholder {color:#999}
<script src="http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js"></script>
<script>
//本代码发布在 http://seavers.iteye.com/ , 未经同意,谢绝转载
//模拟了placeholder 80%的功能
(function() {
var S=KISSY, Dom = S.DOM, Event = S.Event;
S.namespace("HTML5");
S.HTML5.placeholder = {
support : "placeholder" in document.createElement("input"),
activate : (function() {
function _showPlaceholder(el, className, value) {
if (!Dom.hasClass(el, className) && !el.value) {
el.value = value;
Dom.addClass(el, className);
}
}
function _hidePlaceholder(el, className, value) {
if (Dom.hasClass(el, className)) {
el.value = value;
Dom.removeClass(el, className);
}
}
function _activatePlaceholder(selector) {
var ATTR = "placeholder", CLASS = "placeholder";
S.each(S.query(selector), function(el){
var TIP = el.getAttribute(ATTR);
if (!TIP) return ;
Event.on(el.form, 'submit', function(ev) {
_hidePlaceholder(el, CLASS, "");
});
Event.on(window, 'unload', function(ev) { //解决firefox3.6刷新问题
_hidePlaceholder(el, CLASS, "");
});
Event.on(el, 'focusin', function(ev){
_hidePlaceholder(el, CLASS, "");
});
Event.on(el, 'focusout', function(ev){
_showPlaceholder(el, CLASS, TIP);
});
_showPlaceholder(el, CLASS, TIP);
});
}
return _activatePlaceholder;
})()
};
//如果有原生的placeholder,使用原生,否则使用模拟的
if (!S.HTML5.placeholder.support) {
S.HTML5.placeholder.activate('INPUT');
}
})();
</script>
分享到:
相关推荐
SSH笔记-通过property-placeholder使用外部属性文件的demo
Laravel开发-placeholder 用于使用占位符图像服务向应用程序添加图像的Laravel包。
Placeholder是HTML5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。如: <input name="username" type="text" placeholder=...
context:property-placeholder 和util:properties 博客:https://blog.csdn.net/u010476739/article/details/76735527
html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder="搜索" value=" "> 默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决...
更好的占位符polyfill [placeholder] polyfill for placeholder属性非常有用,尽管在某些 UI 中具有“可选”...这会将bower_components -placeholder- bower_components的最新版本克隆到项目根目录下的bower_compon
这将确保ng-placeholder文本值可在所有浏览器中正常运行,并尽可能使用HTML5功能。 您也可以使用以下格式: <input type="text" ng-placeholder="This is placeholder text" /> 执照 该代码已获得MIT的许可...
script src =" components/jquery-html5-placeholder-shim/jquery.html5-placeholder-shim.js " > </ script > < script src =" components/angular-placeholder-shim/angular-placeholder-shim.js " &...
var getPlaceholderModule = require ( 'quill-placeholder-module' ) . default // umd var getPlaceholderModule = PlaceholderModule . default Quill . register ( 'modules/placeholder' , ...
webpack-image-placeholder-loader 该加载器从给定图像生成彩色或纯色图像,用作占位符。 该程序包在内部使用。 有关从图像派生的,请参见。 支持JPEG,PNG,WebP,TIFF,GIF和SVG图像。 例子 安装 使用npm安装:...
前端项目-placeholder-shiv,占位符属性的小polyfill。需要prototype.js或jquery
自定义input的placeholder属性为pro,细节自己看源码,源码不多,容易理解
前端项目-placeholder.js,图像占位符使用画布完全在浏览器中呈现图像占位符。
quill-html-placeholder 与quilljs编辑器一起使用的模块,该模块将占位符html插入到编辑器中用法加载Quill后,将placeholder.js包含到您的项目中。 然后,在初始化编辑器时,将placeholder包含在模块配置中,如下所...
npm i react-native-shimmer-placeholder --save 要么 yarn add react-native-shimmer-placeholder 用法 简单 对于expo import ShimmerPlaceholder from ' react-native-shimmer-placeholder ' < Te
TinyMCE 的占位符文本插件 这个插件为 TinyMCE 编辑器带来了 HTML5 占位符属性功能。 用法 将插件脚本添加到页面 将“占位符”添加到 tinymce 配置插件数组。 像往常一样向 textarea 添加占位符属性。 享受!
React图像占位符 ... import ImagePlaceholder , { NicolasCage , BillMurray , StevenSeagal , TheHoff , VanillaIce } from './image-placeholder/image-placeholder' ; React . render ( < div>
react-native-img-placeholder-component 一个带有占位符的React本机图像组件 如果您有任何问题,请随时添加问题! 安装 使用npm npm i --save react-native-img-placeholder-component 用纱 yarn add react-...
CKEditor 5占位符功能 ...import Placeholder from "ckeditor5-placeholder" ; ClassicEditor . create ( document . querySelector ( "#editor" ) , { plugins : [ // ... Placeholder , ] , toolbar : [ /
动态占位符图像 用于管理和提供网站使用的动态占位符图像的 这里有什么? gga-dynamic-placeholder-images.php - WordPress 插件包装器(加载类、注册核心钩子等) ...class-gga-dynamic-placeholder-images-attachmen