Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jackrugile/placeholdem

Placeholder Caret Animation
https://github.com/jackrugile/placeholdem

Last synced: 5 days ago
JSON representation

Placeholder Caret Animation

Host: GitHub
URL: https://github.com/jackrugile/placeholdem
Owner: jackrugile
License: mit
Created: 2014-02-08T08:39:31.000Z (almost 11 years ago)
Default Branch: gh-pages
Last Pushed: 2018-05-11T02:58:52.000Z (over 6 years ago)
Last Synced: 2024-03-14T23:06:25.850Z (9 months ago)
Language: CSS
Homepage: http://placeholdem.jackrugile.com
Size: 63.5 KB
Stars: 373
Watchers: 19
Forks: 50
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

awesome - jackrugile/placeholdem - Placeholder Caret Animation (SCSS)

README

# Placeholdem

[![Project Status: Inactive - The project has reached a stable, usable state but is no longer being actively developed; support/maintenance will be provided as time allows.](https://www.repostatus.org/badges/latest/inactive.svg)](https://www.repostatus.org/#inactive)

#### 2016-11-04 Update

This project is no longer being developed or maintained. The effect this plugin gives is visually appealing, but it's a bad practice in terms of usability and accessibility. On top of that, manipulating the values of different HTML5 input types directly has a lot of issues (text, email, number, search, etc.). I suggest using an alternative styling for labels and placeholders, such as [Floating Labels](https://css-tricks.com/float-labels-css/).

-----

#### Placeholder Caret Animation

- **Version:** v1.0.2
- **Date:** 2015-02-08

#### [View Demo](https://placeholdem.jackrugile.com)

Placeholdem is a JavaScript plugin that animates placeholder carets on inputs and textareas. The placeholder value will incrementally delete on focus, and restore on blur.

```html

```

```js
// run Placeholdem on all elements with placeholders
Placeholdem( document.querySelectorAll( '[placeholder]' ) );
```