It doesn't support the "#" key from Windows ?

There is no support For RTL Languages I believe, here is an example of a sentence written in the Arabic Language.

How do I change the width and height of the input box in CSS?

The method name is setCarrot in the source. Everywhere else it gets it right. Not sure if joke or if typo.

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.

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.

Good Plugin . . .Thank you

Safari 6.02; OSX 10.8.2. Clicking on, typing, pressing command — all of these cause the .fancyInput.

One way to fix (not sure if this is best) is to apply -webkit-backface-visibility: hidden; to .fancyInput.

Would you like to publish this to NPM??

It fails on Chrome on Android at least.
Got a blinking cursor but no new text is added as the cursor moves. no effects.

On OSX, try to type e.g. "é" by first pressing alt+e and then typing e - this seems to make everything break?

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.

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

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.

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?

In you css file you apply styles to all textareas on a web page, because you use selector like this:
.fancyInput input, textarea
You must change in to .fancyInput input, .fancyInput textarea.

On Chrome, I am able to get to the resize textarea thumb at the bottom right. If I drag the textarea to a bigger height and width, the input text flashes with each letter typed, then disappears, leaving me with an empty looking textarea. Neat effects though.

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 .

I've found a bug on demo website http://dropthebit.com/demos/fancy_input/fancyInput.html . When I press tab the web seems to get the other input focus and hides the demo UI

If I hit cmd+A to select all, it selects the text, puts an "a" at the end of the input, and I cannot delete the "a".

For my own purposes where the text color (#color below) was a shade of blue this is what I used, haven't tested what would fix it for the demo:

(& refers to the <input>.)

$color_here: lighten(#color, 15%);
&::-moz-selection {
    background-color: rgba(red($color_here), green($color_here), blue($color_here), .2);
}

It seems we have to use the alpha of rgba to (lighten the color and) reduce the opacity since opacity itself does diddly squat.

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!

cdnjs/cdnjs#6664

Unable to delete characters what we have entered with 'Delete' button and those characters stays there unless you refresh the browser

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.

I'm currently working on implementing twitters typeahead autocomplete feature for fancyInput. However I'm no* expert. Has anyone attempted to do this?

Hello,

Your plugin is awesome! I wanted to make a suggestion or recommendation, I was trying to implement this myself due to curiosity, but after the slogan is automatically typed in the first input field (type something... ✌), is it possible to have that slogan value revert back to EMPTY (blank, null) onkeypress or onkeyup? This way a user doesn't have to delete the slogan (type something... ✌) in order to type what they want in the input field. Hope this makes sense.

Thank you for any assistance in accomplishing this :)

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>.

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.

@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.

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?

Does this supports in IE Any versions ?

Hey, maintainer(s) of yairEO/fancyInput!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library yairEO/fancyInput is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "yairEO/fancyInput",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

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>

When I am trying to erase characters after a fillText()

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!)

Safari 6.0.2; OSX 10.8.2

Pressing command + key inserts the key in addition to performing the action. Ie...

• ⌘ + A for "select all" selects all characters but also inserts an "A" character
• ⌘ + C for "copy" selects all characters but also inserts a "C" character

...etc.

ctrl / cmd + A, select all doesn't work.
Firefox 19.0 on OSX