Giter VIP home page Giter VIP logo

superplaceholder.js's Introduction

superplaceholder.js npm version

Super charge your input placeholders


DEMOInstallationUsage

superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

Demo

Installation

superplaceholder.js is less than 1KB minified & gzipped.

  • Bower: bower install superplaceholder
  • NPM: npm install superplaceholder
  • Download zip.

Note: superplaceholder.js supports AMD and commonJS module pattern out of the box.

Usage

Syntax

superplaceholder({
	el: <target_input_element>,
	sentences: <array_of_texts>,
	options: {} // optional customizable parameters
});

Basic

superplaceholder({
	el: document.querySelector('input'),
	sentences: [ 'Something to show', 'Another thing to show']
});

Customization

Pass an optional options object for custom settings.

superplaceholder({
	el: document.querySelector('input'),
	sentences: [ 'Something to show', 'Another thing to show'],
	options: {
		// delay between letters (in milliseconds)
		letterDelay: 100, // milliseconds
		// delay between sentences (in milliseconds)
		sentenceDelay: 1000,
		// should start on input focus. Set false to autostart
		startOnFocus: true,
		// loop through passed sentences
		loop: false,
		// Initially shuffle the passed sentences
		shuffle: false,
		// Show cursor or not. Shows by default
		showCursor: true,
		// String to show as cursor
		cursor: '|'
	}
});

Browser Support

superplaceholder.js works best on latest versions of Google Chrome, Firefox and Safari and Chrome mobile.

For all non-supported browsers, the library will graceful degradate without any explicit handling in your code.

Contributing

Interested in contributing features and fixes?

Read more on contributing.

Changelog

See the Changelog.

License

Copyright (c) 2016 Kushagra Gour, http://kushagragour.in This work is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.

superplaceholder.js's People

Contributors

chinchang avatar bpongy avatar marcobiedermann avatar electerious avatar

Watchers

James Cloos avatar Jaewon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.