yaireo / fancyinput Goto Github PK
View Code? Open in Web Editor NEWMakes typing in input fields fun with CSS3 effects
Makes typing in input fields fun with CSS3 effects
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>
How do I change the width and height of the input box in CSS?
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?
On OSX, try to type e.g. "é" by first pressing alt+e and then typing e - this seems to make everything break?
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".
Unable to delete characters what we have entered with 'Delete' button and those characters stays there unless you refresh the browser
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!
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 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.
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?
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!)
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 :)
Good Plugin . . .Thank you
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.
The method name is setCarrot in the source. Everywhere else it gets it right. Not sure if joke or if typo.
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
@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.
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.
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.
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.
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.
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'm currently working on implementing twitters typeahead autocomplete feature for fancyInput. However I'm no* expert. Has anyone attempted to do this?
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!
It fails on Chrome on Android at least.
Got a blinking cursor but no new text is added as the cursor moves. no effects.
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>
.
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??
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 .
When I am trying to erase characters after a fillText()
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.
ctrl / cmd + A, select all doesn't work.
Firefox 19.0 on OSX
Does this supports in IE Any versions ?
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.
It doesn't support the "#" key from Windows ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.