pryley / float-labels.js Goto Github PK

View Code? Open in Web Editor NEW

88.0 88.0 22.0 413 KB

A zero-dependency plugin that applies the float label pattern to a form.

Home Page: https://pryley.github.io/float-labels.js/

License: MIT License

JavaScript 38.94% HTML 38.50% SCSS 22.56%

floating-labels vanilla-javascript zero-dependency

float-labels.js's People

Contributors

Stargazers

Watchers

float-labels.js's Issues

invalid css property

"border-radius-top-left": https://github.com/geminilabs/float-labels.js/blob/master/src/float-labels.scss#L186

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius

webpack example

Hi,

Thanks for the plugin.
Do you have an example using webpack?

Thanks

get attribute value in modal dialog

I have searched, and found something close to my problem, but it did not solve # 14.

Using a Modal Dialog, I was unsuccessful in displaying the field label.

As the field was populated via an ajax (json) return. its value attribute is always empty.

How can I check this case and display the label correctly for modal dialog?

Float labels mess layout of element when used with bootstrap input group

It is messing layout when used with bootstrap input group. (I.e : color-pickers, date/time pickers etc)
I have tried few hacks in code :

hasParent: function( el )
{
	if(jQuery(el).closest(".input-group").length && jQuery(el).closest(".fl-wrap").length){
		return false;
	}
	else{
		return el.parentNode.classList.contains( this.prefixed( 'wrap' ));
	}
},


wrapLabel: function( labelEl, el )
{
	var wrapper = this.createEl( 'div', {
		class: this.prefixed( 'wrap' ) + ' ' + this.prefixed( 'wrap-' + el.tagName.toLowerCase() ),
	});
	if( el.value !== undefined && el.value.length ) {
		wrapper.classList.add( this.prefixed( 'is-active' ));
	}
	if( el.getAttribute( 'required' ) !== null || el.classList.contains( this.config[this.current].requiredClass )) {
		wrapper.classList.add( this.prefixed( 'is-required' ));
	}
	if(jQuery(el).closest(".input-group").length){
		jQuery(el).closest(".input-group")[0].parentNode.insertBefore( wrapper, jQuery(el).closest(".input-group")[0] );
		wrapper.appendChild( jQuery(el).closest(".input-group")[0] );
	}
	else{
		el.parentNode.insertBefore( wrapper, el );
		wrapper.appendChild( el );
	}
	wrapper.appendChild( labelEl );
}

Above code did what i wanted but few things broken like when input is blank it does not removes fl-is-active also it is adding fl-wrap div multiple time.

Any quick fix for input-group ?

Also it does not work with select 2, In multiple option selection it is still adding label as a first option as a selected. Any way i can fix it ?

float-labels only being applied to first select and input, ignores subsequent input

Float Labels: @Version: 3.0.3

Called on click with:

if (typeof floatlabels !== "undefined") {
	floatlabels.destroy();
	console.log("existed, but destroying");
}
floatlabels = new FloatLabels( 'form', {
    // options go here
    customEvent  : null,
    customLabel  : null,
    exclude      : '.no-label',
    inputRegex   : /email|number|password|search|tel|text|url/,
    prefix       : 'fl-',
    prioritize   : 'label',
    requiredClass: 'required',
    style        : 1,
    transform    : 'input, select, textarea',
});

Using the following HTML structure, float-labels is not applied to the input after the first select and input:

<form>
    <fieldset class="uk-fieldset">
        <legend class="uk-legend">Legend</legend>
        <div uk-grid class="uk-margin-top uk-grid-small">
            <div class="uk-width-1-2">
            <label for="select_1">Select 01</label>
                <select id="select_1" class="uk-select">
                    <option>Select</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                </select>
            </div>
            <div class="uk-width-1-2">
            <label for="input_1">Input 01</label>
                <input id="input_1" class="uk-input" type="text" placeholder="Input 01">
            </div>
            <div class="uk-width-1-1">
           <!-- not applied to this -->  
            <label for="input_2">Input 02</label>
                <input id="input_2" class="uk-input" placeholder="Input 02">
            </div>
            <div class="uk-width-1-1">
                <button class="uk-width-1-1 uk-button uk-button-default">Submit</button>
            </div>
        </div>
    </fieldset>
</form>

I can see a wrapper div fl-wrap is added to the first select and input, however it is not added to the subsequent input.

Uncaught TypeError: Cannot read property 'defaultSelected' of undefined

Steps to reproduce:

go to: https://geminilabs.github.io/float-labels.js/
use the browser back button
use the browser forward button
script errors out

float-labels.js@316

var selected = el.options[el.selectedIndex].defaultSelected !== true ? true : false;

Bundling float-labels.js with webpack

Hi,

I'm trying to bundle the float-labels.js plugin into my JS with webpack.
I tried several approaches but didn't get anything to work. I installed it with

npm install --save float-labels.js

My app.js looks as following

...
require('jquery-ui/ui/widgets/autocomplete');

require('bootstrap-datepicker');
require('float-labels.js');

require('./my-script');
...

This leaves me with the following error

TypeError: $(...).autocomplete is not a function

Before, I just downloaded your .js and added a corresponding script tag to my markup and it worked, but I'd like to bundle it with my own script now. Maybe you can help me :) ?

Thanks in advance!

Float labels inserts label as a select option?

Given this markup

<label for='contact_country_id>COUNTRY</label>
     <select name="contact[country_id]" id="contact_country_id">
       <option>Select a country</option>
       <option value="1">Afghanistan</option>

...once I setup FloatLabels const floatlabels = new FloatLabels('form', {});, it will insert the word "COUNTRY" as the first selected option in the select, ignoring any other pre-selected country. Why would this be desired behavior and how do I prevent it?

Support for select2 inputs?

Do you think about adapting this library for select2. Thanks!

ng-model issue in angularjs

<form>
   <input type="text" id="test" ng-model="vm.user.test">
   <label for="test">Test</label>
</form>

and inside my class constructor

window.floatlabels = new window.FloatLabels('form', {
      // options go here,
      style: 1
});

Although the plugin works ok with the above example (I have a float label) I lose the connection with ng-model. More specifically, the value of vm.user.test is not updated anymore.

Before add this plugin everything was working. Any idea how this plugin affects the above simple case ?

Incorrect function name

Why is this named $.fn.starrating? https://github.com/geminilabs/float-labels.js/blob/master/src/float-labels.js#L296

import FloatLabels from 'float-labels.js' doesn't seem to import

Hello,

I believe import functionality has been implemented, see: #21.

However, it doesn't seem to be importing for me.

Webpack build doesn't throw errors, but no plugin classes are added to the label etc.

Install

npm install float-labels.js --save

my_entry_file.js

import FloatLabels from 'float-labels.js';

$(document).ready(function() {
var floatlabels = new FloatLabels( '#input_1', {
// options go here
});
});

index.html

<label for="input_1">some text here</label>
<textarea id="input_1" class="uk-textarea" rows="4" placeholder="some text here"></textarea>

<label for="input_2">some text here</label>
<textarea id="input_2" class="uk-textarea" rows="4" placeholder="some text here"></textarea>

Version

"float-labels.js": "^3.3.9"

Thank You.

float-labels.js plugin and datepicker

I am using a field in the format datepicker.

When you manually enter a date, it works fine.

But when using select a date by datepicker, the label does not work.

Replacing colon with empty string

Is there a reason why the colons in the label text are replaced with an empty string in line 152 by the getLabelText method?
I removed the replacing to test if it breaks something but everything worked fine.
I need to show a url, with https:// prefixed, to the user.

Thank you in advance
#35

Object doesn't support property or method 'forEach' error IE11

IE version: 11.0.9600.18697 windows 7

Rebuild only one field instead of entire page?

It would be nice to target a specific element to rebuild floatLabels within instead of entire page (for optimization reasons). Is there a way to do that?

Not working with textarea

I noticed the plugin is having issues with textareas:

(Bug) Autocomplete

Fix

Dropdown/select box "selected" attribute isn't acknowledged

First off, thanks for putting together this script.

Unlike inputs and textareas, if a select box has a predefined/initial selected="selected" option, float-labels doesn't activate for that field.

For example, the following will show "United States" styled as a a grayed out placeholder without any floating label:

<label for="country">Country</label>
<select id="country">
    <option>Country</option>
    <option value="CA">Canada</option>
    <option value="US" selected>United States</option>
</select>

Labels not applied to elements with existing values in angular

When using Angular, your form inputs will not have a value attribute, but they will have a value. I am going to put in a PR to fix this issue.

#14

Setting field value through javascript doesn't show the label

Hello, great plugin by the way....

When I set the field value using javascript the label does not show up. I've tried triggering change event too but no success.

input.value = val;
input.dispatchEvent(new Event('change'));

However I was able to use this workaround but see if there is a way of updating float-labels so workaround is not needed... Thanks...

input.value = val;
el.parentNode.classList.add('fl-is-active');

jquery datepicker

the tag is behind the input with the jquery datepicker plugin

Chrome V66 placeholder doesn't dissapear on-focus

Hello,
With Chrome version 66 when you focus on the input field the placeholder text doesn't disappear until you start typing, however in IE11 it does.

EDIT:
I added to css:

.fl-form .fl-has-focus input.fl-input::-webkit-input-placeholder {
color: #fff;
}

Seems to have fixed it. Not sure if this is best way to go around it.

You can close ticket if so.

Not Used floatlabels.rebuild();

It is possible not to use float labels.rebuild (); after returning from ajax?
maybe run only once and automatically recognize an active field ?

Support for input type file?

Can file be added to inputRegex like:

inputRegex   : /email|number|password|search|tel|text|url|file/

Thank You.

Bare bones CSS for implementation in framework environment

Hello,

Thanks for the great plugin.

I use less and a css framework (getuikit.com) so do not need the additional styles that are added to form elements (margins, colors, padding etc).

In case it is of help to others in a similar situation, below were my steps to remove all additional styles, but keep the great label animations etc.

Downloaded /dist/float-labels.css
Unminified it
Commented out all other sections so all I had left was:

.fl-form .fl-wrap {
    position: relative;
}

.fl-form label.fl-label {
    opacity: 0;
    visibility: hidden;
    display: block;
    position: absolute;
    top: -12px;
    left: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #bbb;
    transition: all .2s ease-in-out;
    z-index: 1
}

.fl-form .fl-is-active label.fl-label {
    opacity: 1;
    visibility: visible
}

.fl-form .fl-has-focus label.fl-label {
    color: #1976d2
}

.fl-form.fl-style-1 label.fl-label {
    top: 1px;
    left: 10px;
    background-color: transparent;
    padding: 12px 3px
}

.fl-form.fl-style-1 label.fl-label:before {
    content: "";
    display: block;
    position: absolute;
    top: 19px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #fff;
    z-index: -1
}

.fl-form.fl-style-1 .fl-is-active label.fl-label {
    top: -9px;
    padding: 3px
}

.fl-form.fl-style-1 .fl-is-active label.fl-label:before {
    top: 9px
}


.fl-form.fl-style-2 label.fl-label {
    top: 1px;
    left: 10px;
    background-color: #fff;
    padding: 6px 3px 3px
}

.fl-form.fl-style-2 .fl-has-focus label.fl-label,
.fl-form.fl-style-2 .fl-is-active label.fl-label {
    background-color: #fff
}

Full commented out version below:

/*!
 * Float Labels
 *
 * @version: 3.0.3
 * @author: Paul Ryley (http://geminilabs.io)
 * @url: https://geminilabs.github.io/float-labels.js
 * @license: MIT
 */

.fl-form .fl-wrap {
    position: relative;
    // text-rendering: optimizeLegibility;
    // -webkit-font-smoothing: antialiased;
    // -moz-osx-font-smoothing: grayscale
}

.fl-form input.fl-input,
.fl-form select.fl-select,
.fl-form textarea.fl-textarea {
    // width: 100%;
    // outline: 0;
    // font-size: 16px;
    // line-height: 1.5;
    // border-radius: 3px;
    // border: 1px solid #dfdfdf;
    // background-color: #fff;
    // box-sizing: border-box;
    // transition: all .2s ease-in-out;
    // margin-bottom: 24px
}

.fl-form input.fl-input:-moz-placeholder,
.fl-form input.fl-input::-moz-placeholder,
.fl-form select.fl-select:-moz-placeholder,
.fl-form select.fl-select::-moz-placeholder,
.fl-form textarea.fl-textarea:-moz-placeholder,
.fl-form textarea.fl-textarea::-moz-placeholder {
    // color: #bbb
}

.fl-form input.fl-input:-ms-input-placeholder,
.fl-form select.fl-select:-ms-input-placeholder,
.fl-form textarea.fl-textarea:-ms-input-placeholder {
    // color: #bbb
}

.fl-form input.fl-input::-webkit-input-placeholder,
.fl-form select.fl-select::-webkit-input-placeholder,
.fl-form textarea.fl-textarea::-webkit-input-placeholder {
    // color: #bbb
}

.fl-form select.fl-select {
    // position: relative;
    // color: #bbb;
    // cursor: pointer;
    // -webkit-appearance: none;
    // -moz-appearance: none
}

.fl-form .fl-is-active input.fl-input,
.fl-form .fl-is-active select.fl-select,
.fl-form .fl-is-active textarea.fl-textarea {
    // color: #444;
    // background-color: #fff;
    // border-color: #dfdfdf
}

.fl-form .fl-has-focus input.fl-input,
.fl-form .fl-has-focus select.fl-select,
.fl-form .fl-has-focus textarea.fl-textarea {
    // background-color: #fff;
    // border-color: #1976d2
}

.fl-form label.fl-label {
    opacity: 0;
    visibility: hidden;
    display: block;
    position: absolute;
    top: -12px;
    left: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #bbb;
    // border-radius-top-left: 3px;
    transition: all .2s ease-in-out;
    z-index: 1
}

.fl-form .fl-is-active label.fl-label {
    opacity: 1;
    visibility: visible
}

.fl-form .fl-has-focus label.fl-label {
    color: #1976d2
}

.fl-form .fl-is-required:before {
    // opacity: 1;
    // content: "*";
    // display: block;
    // position: absolute;
    // top: 1px;
    // right: 15px;
    // font-size: 16px;
    // line-height: 1.75;
    // color: #d32f2f;
    // transition: all .2s ease-in-out;
    // padding: 6px 0 0;
    // z-index: 1
}

.fl-form .fl-is-required.fl-is-active:before {
    // opacity: 0
}

.fl-form.fl-style-1 input.fl-input,
.fl-form.fl-style-1 select.fl-select,
.fl-form.fl-style-1 textarea.fl-textarea {
    // padding: 6px 12px
}

.fl-form.fl-style-1 select.fl-select {
    // height: 38px
}

.fl-form.fl-style-1 .fl-is-active input.fl-input,
.fl-form.fl-style-1 .fl-is-active select.fl-select,
.fl-form.fl-style-1 .fl-is-active textarea.fl-textarea {
    // padding: 6px 12px
}

.fl-form.fl-style-1 label.fl-label {
    top: 1px;
    left: 10px;
    background-color: transparent;
    padding: 12px 3px
}

.fl-form.fl-style-1 label.fl-label:before {
    content: "";
    display: block;
    position: absolute;
    top: 19px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #fff;
    z-index: -1
}

.fl-form.fl-style-1 .fl-is-active label.fl-label {
    top: -9px;
    padding: 3px
}

.fl-form.fl-style-1 .fl-is-active label.fl-label:before {
    top: 9px
}

.fl-form.fl-style-2 input.fl-input,
.fl-form.fl-style-2 select.fl-select,
.fl-form.fl-style-2 textarea.fl-textarea {
    // padding: 12px
}

.fl-form.fl-style-2 select.fl-select {
    // height: 50px
}

.fl-form.fl-style-2 .fl-is-active input.fl-input,
.fl-form.fl-style-2 .fl-is-active select.fl-select,
.fl-form.fl-style-2 .fl-is-active textarea.fl-textarea {
    // padding: 18px 12px 6px
}

.fl-form.fl-style-2 label.fl-label {
    top: 1px;
    left: 10px;
    background-color: #fff;
    padding: 6px 3px 3px
}

.fl-form.fl-style-2 .fl-has-focus label.fl-label,
.fl-form.fl-style-2 .fl-is-active label.fl-label {
    background-color: #fff
}

.fl-form.fl-style-2 .fl-is-required:before {
    // padding-top: 12px
}

.fl-form .fl-wrap-select:after {
    // content: "";
    // position: absolute;
    // display: block;
    // top: 1px;
    // right: 6px;
    // height: calc(100% - 2px);
    // width: 12px;
    // background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='#bbb' d='M 4 0 L 0 6.5 L 8 6.5 L 4 0 z M 0 9.5 L 4 16 L 4 16 L 8 9.5 z'/></svg>") no-repeat;
    // background-position: 100% 50%;
    // background-size: 7px 14px;
    // z-index: 2
}

Does not work when passed form element.

The code seems to choke on text nodes.

To reproduce, attempt to pass native element which includes text nodes (any white space).

How to trigger label animation on focus or other event?

I am wondering if it is possible to trigger the label animation (which I am assuming is the result of a check on the input's contents?) in order to handle the following scenarios:

Content is programmatically added to an input
The field is clicked on

For the first scenario, I have tried:

$(".my_input").val("some input").focus().keydown().keyup();

But that doesn't cause the label to show and animate.

The second scenario involves a datepicker that is triggered when clicking on the input - after selecting the date, which adds the date string to the input field, the label does not show and animate.

Perhaps altering the logic that triggers the animation so that it runs on field focus (rather than what it is running on now - I can't determine that in the code yet) could facilitate the above?

Float-labels.js doesn't copy asterisk (*)

I have a label like "First Name *". When Float-labels copies this as the placeholder for an associated input, it removes the asterisk. I'm not sure why this is happening, but I feel like the JS component is trying to be a little too clever here. Can I get it to just copy labels as-is?

Module Support

Hey, Great Plugin, however, would be nice if you added module support... Should not be much work. It would be nice to just:

import FloatLabels from 'float-labels.js';

I think all you have to do is duplicate float-labels.js/src/float-labels.js -> float-labels.js/src/float-labels-module.js and remove:

;(function( window, document, undefined )
{
	"use strict";
//and
})( window, document );

and replace:

window.FloatLabels = Plugin;

with

export default Plugin;

Thanks!

Problems with typescript

I think the float-labels.js is great

I downloaded the project with npm install float-labels.js and then I loaded
the dist / float-labels.css and dist / float-labels.min.js with the web package, but for some reason you do not see the styles.

Additionally I also load the script.js file in my webpack and still it still does not work.

I understand that the project is done in javascript, but is there any way to use it in typescript with webpack?

This is the configuration file that I am loading

"node_modules/float-labels.js/demo/script.js",

/** global: FloatLabels */

var floatlabels;
var toggleBtn = document.querySelector('.fl-toggle');
var styles = document.getElementsByName('style');

var getStyle = function () {
  for (var i = 0; i < styles.length; ++i) {
    if (styles[i].checked) {
      return styles[i].value;
    }
  }
  return 0;
};

floatlabels = new FloatLabels('.form-1', {
  style: getStyle(),
});

"node_modules/float-labels.js/dist/float-labels.css"
"node_modules/float-labels.js/dist/float-labels.min.js"

thank you very much

Issue select multiple

Hi,

This is the way I initialize :
var floatlabels = new FloatLabels('form');

I get this error only on multiple select :
Uncaught TypeError: Cannot read property 'defaultSelected' of undefined

Label active when element is in focus

Hi, is there any way to change the behavior of the plugin so that the label fires when there is focus on the element?

RTL Support

Asking about any plan to support RTL in the future ..

pryley / float-labels.js Goto Github PK

float-labels.js's People

Contributors

Stargazers

Watchers

Forkers

float-labels.js's Issues

Recommend Projects

Recommend Topics

Recommend Org