npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

arale-placeholder

v1.1.0

Published

针对不支持 html5 placeholder 的占位符兼容解决方案。

Downloads

6

Readme

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 值不会被提交