Makes typing in input fields fun with CSS3 effects

Overview

Fancy Input

Makes typing & deleting in input/Textarea fields exciting & fun with CSS3 effects.

alt tag

View Demo Page

Basic use example:

<!-- ...previous page content... -->
<div>
	<input type='text' >
</div>
<div>
	<textarea></textarea>
</div>
<!-- ...some more content (hopefully)... -->
<script>
    $('div :input').fancyInput();
</script>

Call the .fancyInput() function on all parents of inputs. With this example code, make sure every input is wrapped in a div.

This plugin does not have any current plans to support any version of IE.

Comments
  • On firefox on Mac, selection obscures the text

    On firefox on Mac, selection obscures the text

    At least with Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:22.0) Gecko/20130227 Firefox/22.0

    any selection hides the selected text.

    (other than that, really nice!)

    opened by davidascher 12
  • not really changing value of input field

    not really changing value of input field

    It appears this is just redecorated div which contains the characters typed. I think it should also set the value of the input field so you can actually use the data as one nomrally would in a form field.

    opened by ralyodio 6
  • It doesn't support the

    It doesn't support the "Delete" key from Windows.

    The Backspace key seems to work perfectly. But using the Delete or Del key removes the characters from the <input> tag, but not the <span>s from the showed <div>.

    opened by neojp 4
  • CTRL + A, Backspace/Delete = Broken

    CTRL + A, Backspace/Delete = Broken

    If you CTRL + A and press Delete quickly, you're presented with a broken input. Control error is:

    fancyInput.js:165 Uncaught TypeError: Cannot read property 'offsetLeft' of undefined(…)

    Windows 10 + Chrome 54

    bug 
    opened by Stoyvo 3
  • Adding kotoeri support (Japanese text on MacOS)

    Adding kotoeri support (Japanese text on MacOS)

    This also fixes a little error when deleting text when there is no text, and a little tidying up.

    Haven't tested for Chinese/Korean/other similar languages, but I believe it works the same.

    opened by vaicine 3
  • Remove The Demo Text

    Remove The Demo Text

    Dear, If I want to remove the demo text from the input type let's say "onclick()" how should I do it? I can see that there is: clear : function(textCont)

    How do I call it.

    Thanks and sorry for the beginner's question .

    opened by hristijan5 3
  • Colors flicker when input is focused or key is entered.

    Colors flicker when input is focused or key is entered.

    Thought, it was due to f.lux plugin. However, it's not. I'm using latest chrome on mountain lion. Rather disappointing, did not figure out what is the reason behind this lag. Rewrote everything in sass and still the same thing. Any suggestion, folks?

    opened by kuka 3
  • unable to use alt+backspace

    unable to use alt+backspace

    Using alt + backspace to delete an entire word results in some odd behavior. The word is not deleted and the the cursor appears in the wrong place.

    Tested using latest chrome & firefox on osx.

    opened by fionnbharra 3
  • Break after chrome update

    Break after chrome update

    Hi, after chrome last linux update (5 Aug) carret in input or textarea jump to next line when I typing something, and staying on next line while input is not empty. In project demo page has same bug.

    opened by ipslot 2
  • Not working with Hindi text

    Not working with Hindi text

    I tried with Hindi text but seems it's not working :(

    here is the sample text please try anyone of these

    नमस्ते नमस्कार मनोज

    let me know if you need any more information.

    opened by JangidUK 2
  • update tag to v1.3.2

    update tag to v1.3.2

    hi, recently we want to add your lib in https://cdnjs.com, we use git auto-update depending on git tag to add every released version of lib, could you please update the tags to the latest version? thank you very much!

    https://github.com/cdnjs/cdnjs/issues/6664

    opened by maruilian11 1
  • support Chinese language?

    support Chinese language?

    @yairEO , could it support Chinese words input? or support copy & paste?

    I tested it with demo page and found it could not paste or input chinese.

    Thanks.

    opened by archonwang 3
  • @ with spanish keyboard

    @ with spanish keyboard

    Hello everybody :) I use spanish keyboard and to write @ when I type an email address I click Alt Gr+2. With Fancy Input I can't type this. Any suggestion.

    Tank you in advance.

    opened by mnievesmc 4
  • How do you reset the fancy input back to it's initial state?

    How do you reset the fancy input back to it's initial state?

    I try this: $('section :input').val('').fancyInput().clear();

    It clear up the input val but did not clear up the div that has a bunch of span tag characters. On the browser, you see the input placeholder "hello" is on top of the word text "milk".

    I want to remove the word "milk" so that it is back to the initial input state. Any help here? Thanks for your help :- )

    For example, the is the result i'm getting:

    <section class='xxx'>
             <div class="fancyInput">
                  <input  id="zzz" maxlength="35" name="abc" placeholder='hello' type="text" autocomplete="off" value="">
            </div>
                <div>
                        <span>m</span>
                        <span>i</span>
                        <span>l</span>
                        <span>k</span>
                        <b class="caret" style="height: 208px;">​</b>
                        <b class="caret">​</b>
               </div>
               <div></div>
    </section>
    
    opened by thomasjoyce 1
  • Add an autoType() function that automatically 'types' the text as in the demo

    Add an autoType() function that automatically 'types' the text as in the demo

    Using something like this as a text field is kind of fun for a few minutes, and the effects are great, but it also gets old fast trying to type with the characters bouncing.

    My favorite part of the demo is where I get to watch it type automatically. Being able to set the field as read-only and fill in the values is more interesting to me than trying to type into it.

    Is there some reason you kept that code for the demo out of the plugin?

    opened by geekytime 1
  • Line break in words like a real textarea

    Line break in words like a real textarea

    If you keep typing random words in the textarea one of the words will be break n the middle to jump to another line... that's not how default textarea works, and it's quite annoying behaviour when you are reviewing what you typed in.

    opened by igorsantos07 4
Owner
Yair Even Or
Client-side web developer, UX tinker and UI maker.
Yair Even Or
Magically convert a simple text input into a cool tag list with this jQuery plugin.

jQuery Tags Input Plugin Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns

XOXCO 2.3k Dec 23, 2022
A collection of some additional input types to use with FormKit

A collection of some additional input types to use with FormKit. Most of these additional input types are based on my personal needs, but feel free to submit PRs to add more.

Kurt Gierke 8 Jan 2, 2023
A plugin for Obsidian that can create input fields inside your notes and bind them to metadata fields.

Obsidian Meta Bind Plugin This plugin can create input fields inside your notes and bind them to metadata fields. New docs I am currently working on n

Moritz Jung 57 Jan 4, 2023
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Okoye Charles 14 Oct 3, 2022
A minimal typing practice website with no features except typing. Inspired from Monkeytype. Do ⭐ this repository.

SenpaiType Introduction SenpaiType is a minimal typing practice website with no features except typing. Inspired from Monkeytype. Contributing Raise i

Pruthviraj Jadhav 5 Nov 30, 2022
A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Lars Straathof 1 Apr 13, 2022
Format input text content when you are typing...

Cleave.js Cleave.js has a simple purpose: to help you format input text content automatically. Features Credit card number formatting Phone number for

Max Huang 17.6k Dec 29, 2022
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Ian Lunn 27.9k Jan 4, 2023
CSS3 list scroll effects

stroll.js – because it scrolls, and trolls. A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a

Hakim El Hattab 4.3k Jan 3, 2023
CSS3 Animations with special effects

?? magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S

Christian 7.9k Dec 30, 2022
Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Codrops 966 Jan 4, 2023
Live input Web Audio effects

Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e

Chris Wilson 488 Dec 22, 2022
A declarative, HTML-based language that makes building web apps fun

A declarative, HTML-based language that makes building web apps fun ?? Docs ∙ Try Online ∙ Contribute ∙ Get Support Intro Marko is HTML re-imagined as

Marko 12k Jan 3, 2023
A declarative, HTML-based language that makes building web apps fun

A declarative, HTML-based language that makes building web apps fun ?? Docs ∙ Try Online ∙ Contribute ∙ Get Support Intro Marko is HTML re-imagined as

Marko 12k Jan 3, 2023
Sass makes CSS fun!

Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well

Sass 14.3k Dec 31, 2022
DisOwen project - Makes it easy and fun to use Discord

DisOwen project - Makes it easy and fun to use Discord. Also first userbot for Discord

Ber4tbey 7 Aug 4, 2022
A tiny wrapper around pg that makes PostgreSQL a lot of fun to use. Written in TypeScript.

A tiny wrapper around pg that makes PostgreSQL a lot of fun to use. Written in TypeScript.

Mojolicious 8 Nov 29, 2022
Lavanstax project - Makes it easy and fun to use İnstagram. Also first userbot for İnstagram

Lavanstax Lavanstax project - Makes it easy and fun to use İnstagram. Also first userbot for İnstagram | İnstagram | Telegram Channel | Telegram Group

Berathan Yedibela 19 Oct 15, 2022
A Browser extension that not only makes your browsing experience safe but makes it optimized

Sia Sia is a browser extension that not only makes your browsing experience safe but makes it optimized Table of Contents About The Project Built With

Arun Govind M 14 Feb 23, 2022