Skip to content

aralejs/placeholder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Placeholder


注意,本模块后续将删除。请使用 gallery/placeholders 来代替,使用方式参考 文档

seajs.use('gallery/placeholders/3.0.0/placeholders', function(Placeholders) {
    // Placeholders.enable();
    // Placeholders.disable();
});

Build Status

针对不支持 Html5 placeholder 的占位符兼容解决方案。本组件在已经支持 placeholder 的浏览器下不会做任何事,切记。


模拟原理

在不支持 placeholder 的浏览器中,通过 className 及 value 的方式来实现。

利用了 jQuery 的 valHooks,使得用户使用$.val()接口去操作在操作有 placeholder 的 input 时也不会受到影响。

同时利用 jQuery 的事件代理,保证了所有表单的 submit 事件也不会受到影响。

注意要使用 jQuery 对象的 submit 方法取代原生的 submit 方法,才能正确拦截所有绑定了 placeholder 的 input 对象。

使用说明

placeholder(element)

参数是 element 要模拟的 element,可以是选择器,如果不选,会默认选择整个 body 下的所有inputtextarea

P.S. 如果是模拟的 placeholder,会在 input 元素上追加className="placeholder"目前该参数不支持更改

最佳实践

  1. 最简单的用法,直接 use 组件,不需额外调用代码。

    seajs.use(['arale/placeholder/{{版本号}}/placeholder']);
  2. 针对某些特定的input

    seajs.use(['arale/placeholder/{{版本号}}/placeholder'], function(placeholder) {
        placeholder('#test'); 
    });
  3. 只能使用原生对象提交表单时,可能需要手动清除对应 placeholder 的 value。

    placeholder.clear('#test-form');  // 这个表单里的 input 的 placeholder 值不会被提交
    placeholder.clear('#test-input1, #test-input2'); // 指定的输入框的 placeholder 值不会被提交