
Fancy Input - CSS3 text typing effects for input fields - robin_reala
http://dropthebit.com/demos/fancy_input/fancyInput.html
======
wmeredith
As an interaction designer, I implore you: do NOT screw around with forms.
Your conversion rates will fall through the floor. The CSS specification
itself says that browsers can ignore styling for forms. This is by design.
Overriding it with a bunch of unsupported animated nonsense that requires
Javascript and invisible divs and such is a recipe for disaster from a
usability and accessibility stand point.

~~~
oneplusone
If somebody were doing a browser-based game there is absolutely a place for
this. Sure, general apps should not do this, but I wouldn't say you should
never do this.

That said, the performance on this is too poor to use as is.

~~~
epidemian
> That said, the performance on this is too poor to use as is.

Really? I found it to be super responsive (Firefox on Linux).

But yeah, i agree, for things like games this would be really cool.

~~~
daenz
Responsive, but my cpu usage was at 30%

------
gbog
So many paternalistic comments here telling us to please not use this. As if
it was not obvious enough this fancy input is properly useless, and very
interesting in its uselessness, as an experiment or an exercice de style.

Usefulness is overrated. Would no human ever had followed the craze of useless
endeavors, we would still all be living in caves, and would not even draw with
fingers on theirs walls.

------
SchizoDuckie
Please use this _never_ on mobile. The experience is impossible on android,
and as seen from the rest of the comments on iOS it's not much better...

On desktop it's super cool though. Kudo's!

~~~
ante_annum
> Please use this _never_

You could have ended your sentence there.

~~~
networked
I disagree. This is exactly the kind of thing creates _juiciness_ [1][2] in
games. Just don't put it in my tax forms.

[1] <https://emshort.wordpress.com/2008/05/24/make-it-juicy/>

[2] <https://www.youtube.com/watch?v=Fy0aCDmgnxg> <\-- I'd recommend anyone
who cares about making and/or understanding games to watch this talk.

~~~
notJim
Wow, that talk is fantastic. I think a lot of it applies to regular web
interaction design, too, except that there you probably need to be more
subtle.

------
adamzegelin
Please do not use this.

The whole page flashes and flickers for me on Safari 6.0.2 on Mac OS X 10.8.2.

Input of extended characters also doesn't work. Option-[aeiou] doesn't enter
any characters. Holding [aeiou] prints the base character but fails to update
once a modifier is selected.

The antialising algorithm alternates between subpixel and greyscale, causing
flickering changes to the boldness of the text.

All in all, very very broken.

------
muxxa
Bug report: I managed to get it into a state where it's impossible to delete
the characters behind the cursor. I remember pressing the Euro sign (alt-gr +
4) and accidentally hitting the 'Windows' key. Here's a dump of the DOM state:
<http://pastebin.com/ELyMNAKd>

~~~
UnoriginalGuy
Dumb Q: How did you dump the DOM state like that?

~~~
bvdbijl
In chrome you can right-click on any element in the developer tools to select
"copy as HTML" which copies the DOM as it currently is to your clipboard

------
8ig8
Cool, but please don't use this. It is essentially unusable on my iPad.
Virtual keyboards tend to choke on such fanciness. If you want my input, make
it easier, not harder for me.

~~~
nwh
I concur. It explodes on my iPhone and makes the autocorrection unusable.

------
JoshTriplett
Ugh. When I select text, the selected text does not appear in the same
location as the corresponding unselected text, the cursor doesn't line up with
the selected text, and the cursor moves to incorrect locations in the text as
I move it with shift-arrows.

------
Bjuukia
Pretty. But whenever I see something like this on a website, I disable styles.
As easy as Ctrl-Alt-Z on my browser.

I do it for blogs that have fancy title css, scripted comments... just about
for anything that's unnessesary junk and therefore just a pretty annoyance.

------
yojimbo311
It's certainly "fancy", but... as someone who has been forced to go down this
road more than a few times for desktop and mobile platforms please do NOT
encourage this. The level of manipulation and monitoring of key events
necessary to get even close to parity of normal input behavior and
accessibility, which this example unfortunately doesn't do very well, is
enough to drive one into voluntary retirement.

It's fun to look at and play with, and I know it has some useful applications,
but it quickly becomes incredibly fragile and is guaranteed to waste time and
effort that can, and should, be spent on other stuff. Unless of course there
is nothing left to do and you're just looking for ways to torture some poor
soul hopped up on Red Bull or Mountain Dew.

That said, I definitely do encourage anyone interested to explore how this
stuff works. My experience has been that design pretty much overlooks input
behavior in general, but there are some pretty impressive things that can be
done now without painting yourself into a corner and exploring stuff like this
is probably one of the fastest ways to figure out where the boundaries are.

------
tallowen
The number of bug reports in my opinion sums up the problem with doing this
thing. Even though these effects can be really neat, there is nothing worse
than somebody trying to put in data and have the form not accept thier input
for an unknown reason.

That being said, I think these could be really neat in certain places and
maybe with a bit more testing this could be super useful.

------
skoob
Dead keys seem to confuse it, though. They get added to the value of the input
element, but they aren't displayed.

~~~
jonny_eh
What's a dead key?

~~~
sebbean
<http://en.wikipedia.org/wiki/Dead_key>

slightly more constructive response

------
evv
This is cool, just don't press tab.

------
andrewguenther
Cute, but if I were a user and I saw a form that uses this, I would probably
close the tab.

------
oatmealsnap
Looks great! A few bugs, and probably many usability and compatibility issues,
but I can see something like this finding its way into a movie or game
website. Too flashy for a regular form input, but in the right context it
would feel at home.

------
shocks
Clicking the input box when it's typing "type something..." is causing a crash
for me. Also, I broke it by hitting home and then spamming the left arrow key.
:)

Chrome 27.0.1423.0 dev-m

------
dmvaldman
Really nice! Some things are broken on my iPhone, like the spacing when
deleting and typing letters when they overflow the input area

~~~
woodpanel
I think it's beautiful too. Typing funcionality somewhat breaks if I start to
use the "del" key to delete some text.

------
bluehex
FYI: Switching to an IME to enter Japanese (or any other language, I imagine)
breaks it and doesn't allow typing. Switching back to English doesn't fix it.
Putting the cursor at the beginning again allowed me to type English, but I
can no longer type at the end.

------
meerita
Aside the dizzy collateral effects you get after writing more than 10 words,
when you try to write accented words in other languages it stops working.

With measure, and applying it wisely, this can be a good thing. But for long
texts, it's a madness.

~~~
jpasden
I immediately tried to input Chinese, and it stopped working.

------
pknight
Very cool effects but pretty jittery and laggy when typing fast on chrome 24,
too bad.

------
gatorek
Tried it on Chrome. Non-english characters look awful - fonts are mess, typing
effects work randomly. Sometimes all I'm typing is invisible. For me it's
unusable.

------
JacobIrwin
I'm not an advanced user of jQuery, but still feel slightly ashamed for
asking:

How can I use effect2 without having to change/toggle the class (i.e. effect2
class onPageLoad)??

~~~
JacobIrwin
Tried changing [0] to [1] in this line: $('section
:input').val('').fancyInput()[0].focus();

...still not working...

------
jofo25
I like this! It has potential to be used in really nice ways. Once the kinks
have been worked out, I would definitely consider using this.

~~~
eisbaw
What Intel giveth, CSS and javascript taketh away...

------
davekinkead
Bug: ctrl-a (or ctrl-anything) results in the non-ctlr key stuck in the text
field with no way to delete it

~~~
davekinkead
Should also say - OSX10.7 + FF19

------
frogpelt
If I select 'textarea' it only wraps by letter not by complete word.

I thought someone might want to know.

------
mmuro
File this under "One of those things that _can_ be done but never should be."

------
suyash
It creates a lot of extra DOM nodes, not that great to be honest for this
effect.

------
josh_blum
typing more than 5 letters made be feel i was going to have a seizure.

also, the demo is lacking in basic usuability-- at least have the form
reselected automatically when you change between effects.

------
eisbaw
I never had reasons for animosity against CSS, but now I do.

------
eknkc
Works great on Chrome, causes weird flashes on Safari.

~~~
ErikHuisman
* { -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0,0,0); }

Eliminates the flashing completely. It introduces some weird safari behavior
so only include it if you know what you're doing.

~~~
nevir
This is a _bad idea_ \- forcing every DOM node to become a hardware
accelerated layer is going to introduce a _huge_ amount of memory overhead
(webkit _doesn't_ release composited layers when they scroll off screen, in
_many_ cases)

A better approach is to apply -webkit-transform: translate3d(0, 0, 0) to
_only_ those nodes that will animate.

Your mobile viewers, especially, will be glad that your page doesn't kill the
browser (when it goes OOM)

~~~
artursapek
* { anything } is usually a bad idea.

------
jokull
Stops working if you type an accent character ´

------
momchenr
Gives me a headache.

------
fuleo
Not working on IE9

------
sebbean
broke it within 10 seconds

