arale-placeholder
v1.1.0
Published
针对不支持 html5 placeholder 的占位符兼容解决方案。
Downloads
5
Readme
Placeholder
注意,本模块后续将删除。请使用 gallery/placeholders 来代替,使用方式参考 文档。
seajs.use('gallery/placeholders/3.0.0/placeholders', function(Placeholders) {
// Placeholders.enable();
// Placeholders.disable();
});
针对不支持 Html5 placeholder 的占位符兼容解决方案。本组件在已经支持 placeholder 的浏览器下不会做任何事,切记。
模拟原理
在不支持 placeholder 的浏览器中,通过 className 及 value 的方式来实现。
利用了 jQuery 的 valHooks,使得用户使用$.val()
接口去操作在操作有 placeholder 的 input 时也不会受到影响。
同时利用 jQuery 的事件代理,保证了所有表单的 submit 事件也不会受到影响。
注意要使用 jQuery 对象的 submit 方法取代原生的 submit 方法,才能正确拦截所有绑定了 placeholder 的 input 对象。
使用说明
placeholder(element)
参数是 element
要模拟的 element,可以是选择器,如果不选,会默认选择整个 body 下的所有input
及textarea
。
P.S. 如果是模拟的 placeholder,会在 input 元素上追加
className="placeholder"
,目前该参数不支持更改
最佳实践
最简单的用法,直接 use 组件,不需额外调用代码。
seajs.use(['arale/placeholder/{{版本号}}/placeholder']);
针对某些特定的input
seajs.use(['arale/placeholder/{{版本号}}/placeholder'], function(placeholder) { placeholder('#test'); });
只能使用原生对象提交表单时,可能需要手动清除对应 placeholder 的 value。
placeholder.clear('#test-form'); // 这个表单里的 input 的 placeholder 值不会被提交
placeholder.clear('#test-input1, #test-input2'); // 指定的输入框的 placeholder 值不会被提交