Ember wrapper around Inputmask.
- Ember.js v4.4 or above
- Ember CLI v4.4 or above
- Node.js v18 or above
ember install ember-inputmask
See the Contributing guide for details.
This project is licensed under the MIT License.
Ember wrapper around Inputmask.js
Home Page: https://adopted-ember-addons.github.io/ember-inputmask/
License: MIT License
Ember wrapper around Inputmask.
ember install ember-inputmask
See the Contributing guide for details.
This project is licensed under the MIT License.
Uncaught TypeError: Cannot read property 'inputmask' of undefined(anonymous function) @ input-mask.js:86applyStr @ ember.debug.js:21939sendEvent @ ember.debug.js:15479notifyObservers @ ember.debug.js:18992propertyDidChange @ ember.debug.js:18788exports.default._emberMetalMixin.Mixin.create.propertyDidChange @ ember.debug.js:34847exports.default._emberMetalMixin.Mixin.create.notifyPropertyChange @ ember.debug.js:34861(anonymous function) @ ember.debug.js:41903applyStr @ ember.debug.js:21937sendEvent @ ember.debug.js:15479exports.default._emberMetalMixin.Mixin.create.trigger @ ember.debug.js:34000superFunction @ ember.debug.js:17024_emberRuntimeSystemObject.default.extend.trigger @ ember.debug.js:45999superWrapper @ ember.debug.js:21545Renderer.componentUpdateAttrs @ ember.debug.js:11469(anonymous function) @ ember.debug.js:9269instrument @ ember.debug.js:10000ComponentNodeManager.rerender @ ember.debug.js:9263componentHook @ ember.debug.js:7607handleRedirect @ ember.debug.js:49601inline @ ember.debug.js:49755AlwaysDirtyVisitor.inline @ ember.debug.js:48836(anonymous function) @ ember.debug.js:48920dirtyCheck @ ember.debug.js:48968exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440block @ ember.debug.js:51005(anonymous function) @ ember.debug.js:9285instrument @ ember.debug.js:10000ComponentNodeManager.rerender @ ember.debug.js:9263componentHook @ ember.debug.js:7607handleRedirect @ ember.debug.js:49601inline @ ember.debug.js:49755AlwaysDirtyVisitor.inline @ ember.debug.js:48836(anonymous function) @ ember.debug.js:48920dirtyCheck @ ember.debug.js:48968exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786validateChildMorphs @ ember.debug.js:50782dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786validateChildMorphs @ ember.debug.js:50782dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912RenderResult.populateNodes @ ember.debug.js:50466RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.inline @ ember.debug.js:48919RenderResult.populateNodes @ ember.debug.js:50468RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.content @ ember.debug.js:48926RenderResult.populateNodes @ ember.debug.js:50470RenderResult.revalidateWith @ ember.debug.js:50440validateChildMorphs @ ember.debug.js:50786dirtyCheck @ ember.debug.js:48973exports.default.block @ ember.debug.js:48912
Allows the user to type in a period if the value is empty, making typing a decimal number. Expected result would be masking to integer values and not allowing the user to type a decimal (dot).
My workaround for now:
export default class MyComponent extends Component {
@action
updateMyValue(newMyValue) {
set(this.obj, 'myValue', cleanInteger(newMyValue));
}
}
function cleanInteger(integer) {
if (integer === '' || integer === '.') return null;
return parseInt(integer);
}
So I am trying to use this plugin in conjunction with ember intl as I want to be able to format currency display based off of locale. I believe I have this setup properly, but what I cannot figure out, when I type in new value. Take a look at this twiddle for an example
https://ember-twiddle.com/f918fd32ce094b2969d6daae654b6848?openFiles=controllers.application.js%2C
Thanks
Is it possible to change the value in the update depending on the value the user typed to something else? The issue I am seeing is if I change the number in the update action to something different then the user typed, it only changes the value in the input the first time.
Example: if you change it to a value greater then 15, the input value changes to 15 which is what I expect but then when the input value is 15 add a 5 to it so it is 155, the update action triggers again and changes the underlying value to 15 but the input is stuck in 155 instead of the correct value of 15, it is now out of the sync with the value
https://ember-twiddle.com/47ce7d4475f7ce89f1c9158373160091?openFiles=controllers.application.js%2C
I think a similar issue is described here which the one way-input was based off of
DavyJonesLocker/ember-one-way-controls#100
DavyJonesLocker/ember-one-way-controls#101
Installed addon and getting error:
one-way-input-mask.js:240 Uncaught (in promise) TypeError: _inputmask.default is not a constructor
at Class._setupMask (one-way-input-mask.js:240)
at Class.didInsertElement (one-way-input-mask.js:105)
at Class.trigger (core_view.js:70)
at Class.superWrapper [as trigger] (index.js:423)
at CurlyComponentManager.didCreate (index.js:5226)
at Transaction.commit (runtime.js:3019)
at Environment$1.commit (runtime.js:3122)
at Environment$1.commit (index.js:4234)
at InteractiveRenderer._renderRoots (index.js:5856)
at InteractiveRenderer._renderRootsTransaction (index.js:5886)
I've noticed in npm is available 0.8.5 version instead the last one.
Could you update npm version to 0.9.1?
thanks
Hi,
I'm using number-input and only when I first open the page and delete the existing value of the field via highlighting it all, then the unmaskedValue is not nullified and remains the same.
Have you ever come accross this issue?
This is how I use the component
{{number-input unmaskedValue=minTradeQty.value group=true groupSize=3 separator="." decimal=false radix=","}}
Thanks!
Ali
It appears that in credit card tests, any test that follows the Discovery card will fail because input mask trims the value before it applies the new mask. Resulting in an incorrect value
and unmaskedValue
.
Hi,
For some reason having a variable which contains optional part of a mask it's discarded when loaded, for example:
Having this
{example: {number: '982748238992874822998724892932'}}
and
{{input-mask mask='(999) 999-9999[, (999) 999-9999][, (999) 999-9999][, (999) 999-9999]' unmaskedValue=example.number class='form-control'}}
it shows just the non optional part of the mask like if the mask were
mask='(999) 999-9999'
also noticed by using greedyMask=true it shows the missing parts plus the non fulfilled optional mask
There is some infinite recursion which breaks ember-inputmask
and also makes the resolver import fail, making the hosting app break.
too much recursion[Learn More] metal.js:751
CPGETTER_FUNCTION
metal.js:751
DependencyLib.extend
inputmask.dependencyLib.js:238
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
[...]
Error: Could not find module `ember-resolver` imported from `maskedtest/resolver
Hi,
I can't show a placeholder text with a curreny mask or a one-way-currency-mask.
As a workaround, i use a number mask for the moment
{{one-way-number-mask
class="sizefull p-l-22 p-r-22"
name="price"
options=(hash autogroup=true groupSeparator=',' digits=2 digitsOptional=false suffix=" €" placeholder='0')
placeholder=(t 'sneaker.edit.input.placeholder.price')
type="text"
update=(action (mut model.price))
value=model.price
}}
Hi,
is it possible to use the date extensions the underlying inputmask library provides. I would like to mask "hh:mm TT" but don't know how or if it's currently possible.
Any help appreciated.
I had a number-input
with decimal=false
and though that does prevent a user from entering a decimal point, if the user instead pastes in a value like 100.32, the decimal point is just removed, leaving 10032, which is obviously way bigger. The expected behavior is that the decimal portion be trimmed off.
It works fine, however, if decimals are allowed and the user pastes in a number with more decimal digits. For example, if they paste in 100.321, with default options, the input will show just 100.32.
I tried setting decimal=0
but that didn't fix it. I'm happy to submit a PR, but I don't know what to change to allow this. I'm guessing an else
condition here, but I'm not sure:
//ember-inputmask/components/input-mask
...
updateMask: function() {
this.setProperties({
'options.autoGroup': this.get('group'),
'options.groupSeparator': this.get('separator'),
'options.radixPoint': this.get('radix'),
'options.groupSize': this.get('groupSize')
});
if (this.get('decimal') === true) {
this.set('mask', 'decimal');
this.set('options.digits', 2);
} else if (this.get('decimal')) {
this.set('mask', 'decimal');
this.set('options.digits', this.get('decimal'));
}
this._super();
}.observes('mask', 'group', 'decimal', 'separator', 'radix', 'groupSize')
ember-inputmask still tries to install jquery.inputmast from the repo https://github.com/RobinHerbots/jquery.inputmask.git#3.2.7.
I realized this has been moved to https://github.com/RobinHerbots/Inputmask
Right now it's very confusing when to pass an unmasked value or a masked value to the component. I'm thinking it would be better if users of the component were explicit about which value they cared to work with. An API I think might be good would be something like this:
<OneWayNumberMask @maskedValue=foo @update={{action (mut foo)}} />
In this scenario the developer passed the maskedValue
in and so the update
action would return the maskedValue
as the first argument and the unmaskedValue
as the 2nd argument.
<OneWayNumberMask @unmaskedValue=foo @update={{action (mut foo)}} />
In this scenario the developer passed the unmaskedValue
in and so the update
action would return the unmaskedValue
as the first argument and the maskedValue
as the 2nd argument.
It would be an error to pass both the unmaskedValue
and maskedValue
to the component.
We would deprecate passing value
in as a positional param to help move developers to being explicit about which type of format they want to use.
is there a way I can hook into onhover or something similar?
I'm using this add-on in combination with ember-validated-form but I can't hook .setDirty to this add-on.
Example from ember-validated-form on how to integrate other components in the form:
{{#f.input label="Favorite Color" name="color" as |fi|}}
{{favorite-colors-component selected=fi.value colors=colors onupdate=fi.update onhover=fi.setDirty}}
{{/f.input}}
The error is caused by trying to call a function that does not exist in keyUp
:
I read the documentation and searched the code to see if there was any place this was being used and it doesn't appear so. Can this be deleted entirely? Or should it just be changed to:
keyUp(event) {
let method = get(this, `keyEvents.${event.keyCode}`);
if (method) {
tryInvoke(this, method, [event.target.value]);
}
},
Hi guys, there is an issue with last version of inputmask
. They changed path to inputmask.phone.extensions
and now it's impossible to run it, get an error:
ENOENT: no such file or directory, open '/home/circleci/app/tmp/source_map_concat-input_base_path-eyDKFPNJ.tmp/vendor/inputmask/dist/inputmask/inputmask.phone.extensions.js'
To solve it path should be fixed for 0.8
and 0.7
.
Thanks.
From the looks of input mask itself. The latest non-beta version is 5.0.3. Any plans on upgrading that version?
I need to set the prefix to "R$" instead of "$" and the separators to "." intead of ",". Reading the documentation I've found that I need to change it at the options hash
using the based options supported by the InputMask package. But I'm not sure where is the options hash
and how to change it.
I have tried the following:
{{one-way-currency-mask value=model.value prefix="R$" separator="." class="form-control" update=(action (mut model.value)) }}
And I get that message:
Uncaught TypeError: Cannot assign to read only property 'prefix' of object '#<HTMLInputElement>'
Is there a real issue or did I miss something?
Please, can you explain where do I change options hash?
Perhaps I'm mis-understanding the issue, but are one-way inputs really necessary in this add-on?
Seems that removing 2-way binding to the model is easier handled by something like ember-changeset
?
If I'm understanding it correctly, it seems one-way inputs un-necessarily expands the scope of what this add-ons main feature... input masking?
Apologies if my question seems brash, I'm just curious :)
For some reason I cannot get html autocomplete to work with credit cards that are saved on the browser. I have setup some following examples to show my issue. You just need to add a dummy credit card to your browser to test
Straight just html to show it works:
https://codepen.io/jrock2004/pen/abvPByd
This is using input mask with jQuery:
https://codepen.io/jrock2004/pen/WNQVoxe
Here is my ember app deployed:
https://practical-dijkstra-ac9244.netlify.app
Here is the markup I am using in the ember app
After I try to autofill, this is what I get and not sure what could be wrong
{{one-way-number-mask
value=val
update=(action (mut val))
class="someclass"
options=(hash groupSeparator=" ")
}}
This code generates ton of [violation] errors in JS console:
[Violation] 'setTimeout' handler took 144ms
[Violation] 'input' handler took 693ms
And works slow. What could be the problem here?
The current ember-cli-fastboot
releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.
See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot
Slack channel to get help from other users.
Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!
So I am using your plugin and when I type the numbers everything is getting replaced. Then I use the arrow keys to move before the cents symbol, hit the period and the cursor moves in front of first cent number. Then I try to hit a number and nothing happens.
Here is a link to an Ember Twiddle with an example https://ember-twiddle.com/d7e72b96e9e48b66b4c16988d15a947e?openFiles=routes.application.js%2C
Update 1: It appears that bug was introduced in version 0.4.0-beta.2
as when I set it to beta.1, it works
Similar to #4
Filling an input in, then deleting the contents with either backspace for each char or highlight all and backspace causes the empty mask to be set on the bound prop. Here is a nearly identical open issue on the inputmask lib
The inputmask lib that this wraps provides a oncleared
callback that we can use to unset the inputs value, but I cannot use that callback in an 'embery' way.
This does not work:
{{one-way-email-mask changeset.email
update=(mut 'changeset.email')
options=(hash
oncleared=(mut 'changeset.email', '')
)
}}
This is essentially what we https://jsfiddle.net/5o4k0b3t/10/
Because that options hash is just passed into the inputmask lib as is, we cannot use ember actions / mut helper.
^ That code causes glimmer exception and shuts down the ember app.
in the input-mask
component
if (this.get('unmaskedValue')) {
this.element.value = this.get('unmaskedValue');
}
needs to be
if (isPresent(this.get('unmaskedValue'))) {
this.element.value = this.get('unmaskedValue');
}
I've run into performance issues with credit card
& phone number
components under Ember 1.13.0; they are simply to slow to even be usable. All other ember-inputmask components work fine.
Thinking out loud, there might be an architectural problem on how data gets passed around, an observer going rogue or some sort of memory leak. I'm going to take a look at it. In the meantime I'm leaving this issue to keep track of things.
Hello, I noticed starting with 0.6.4 that setting class on the one-way-input-mask component causes an error. We use bootstrap on our project so we set the class to form-control to match other inputs.
{{one-way-input-mask class="form-control"}}
Generates the message "Assertion Failed: You cannot use class as an attributeBinding, use classNameBindings instead."
I can verify it worked in 0.6.3, if I remove class then 0.6.4 works minus the bootstrap styling
Hey
I would like to use input-mask
with ember-test-selectors, simply to be able to set data-test-selector
property on input. Can I do that easily with ember-inputmask? And if not, how would I go about extending ember-inputmask to allow for that?
Hello.
I had this error trying to use ember-inputmask 0.2.x with jquery.inputmask 3.2.5:
´ENOENT: no such file or directory, stat '~/App/tmp/concat_with_maps-input_base_path-vZJDIM25.tmp/0/bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.min.js'´
But ember-inputmask 2.0.0 works with jquery.inputmask 3.1.49
Date time mask dd HH:MM:ss is not working properly. Not able to set 00 00:10:00 like values.
How to make it possible to insert two masks on v.0.4.x version ?
In v.0.2.x version I did like this:
didRender() {
this._super(...arguments);
this.$('#'+this.get('id')).inputmask({
mask: ['(99) 9999-9999','(99) 99999-9999'],
showMaskOnHover: true,
showMaskOnFocus: true,
clearMaskOnLostFocus: true
});
}
Hi,
following setup worked properly with ember-inputmask versions < 0.7
//mask-definition
import Inputmask from 'inputmask';
export function initialize(/* application */) {
Inputmask.extendAliases({
euro: {
suffix: " €",
groupSeparator: ".",
radixPoint: ",",
alias: "numeric",
placeholder: "0",
autoGroup: !0,
digits: 2,
digitsOptional: !1,
clearMaskOnLostFocus: !1,
autoUnmask: true,
unmaskAsNumber: true
}
});
}
export default {
initialize
};
{{one-way-input-mask value=12.58 mask="euro"}}
Since ember-inputmask > 0.7, the same output results in following output:
The given value (12.58) is multiplicated by 100. Why?
Can you help me?
thank you
Hi,
I want to know if its possible to set yearrange on input date and how can i do it.
I can call
$("#id").inputmask("date", {yearrange: { minyear: 1800, maxyear: 2099 }})
but I want to declare something like this
{{input-mask mask="dd/mm/yyyy" minyear=1800 maxyear= 2099 value=myValue }}
Thanks.
I want to create a ember sandbox to do some testing, but I am getting Error: Compile Error: one-way-input-mask is not a helper
. Not sure if I have not installed something that is required that I am missing. you can see the sandbox here https://codesandbox.io/s/my-app-hhjmm
<h1>Sample</h1>
{{one-way-input-mask
mask="aa-99-**"
class="docs-border docs-border-grey"
}}
"ember-inputmask": "^0.9.1",
ember-cli newbie here, sorry in advance if this is not an issue.
After running ember g ember-input-mask
, ember serve
complains about universal-phone-input
missing. Error goes away after deleting node_modules//ember-inputmask/app/components/universal-phone-input.js
which tries to import the said component.
I just updated to version 0.8.5
and having an issue with with always seeing YYYY instead of what I am typing
{{one-way-date-mask
creditCard.expirationDateMasked
id=el.id
placeholder="MM/YYYY"
class="expirationDate form-control"
showMaskOnHover=false
showMaskOnFocus=false
options=(hash inputFormat="MM/YYYY" outputFormat="MM/YYYY")
update=(action (mut creditCard.expirationDateMasked))}}
What I see in the input is 12/YYYY
If below this code I put {{creditCard.expirationDateMasked}}
I see 12/2025
What am I doing wrong?
Update 1:
I tried just doing the following and still same issue
{{one-way-date-mask
class="expirationDate form-control"
options=(hash inputFormat="MM/YYYY")}}
I then type 12/2025
but all I see is 12/YYYY
How to add something like:
definitions: { "X": { validator: "[xX]", cardinality: 1, casing: "upper" } }
in my input-mask component
Previously I used to add an input mask using
var mask = this.$( 'input' );
if ( mask.length ) {
mask.inputmask({
mask: '1 / y',
alias: 'date',
separator: ' / ',
placeholder: 'MM / YYYY',
showMaskOnHover: false,
showMaskOnFocus: false,
yearrange: {
minyear: 0,
maxyear: 9999
}
});
}
Now it seems I need to use a .hbs template. Is there a way of doing it the older way as I need more control over the input and mask.
Hi!
I recently upgraded from 0.6.8 to 0.72 and I've noticed that a currency input is now getting auto focussed on my forms.
The markup for my input is this:
{{one-way-currency-mask
options=(hash prefix="£")
value=(get changeset propertyName)
update=(action (mut (get changeset propertyName)))
placeholder="What was the cost, if any?"}}
If I downgrade to 0.6.8 it there's no autofocus (as expected).
if I pass autofocus=false
to the component, this also doesn't seem to disable the autofocus...
I see the problem in Safari Version 11.1.2 (13605.3.8).
Hi there. I have been testing my application on IE 11, and I maybe found an interesting "bug". When I wrote a test that triggers an event blur, it worked very fine on Google Chrome, but it does not on IE 11. The test executes the triggerEvent function, but the action is not really executed.
It happens only when the tests go through the one-way-input-mask.
I've written these two failing tests for one-way-number-mask-test.js
.
test('It does not input a zero when hitting "."', async function(assert) {
await render(hbs`<OneWayNumberMask />`);
await fillIn('input', '.');
assert.dom('input').hasValue('');
});
test('It does not input a zero when hitting "m"', async function(assert) { // This also happens with the letter `k`
await render(hbs`<OneWayNumberMask />`);
await fillIn('input', 'm');
assert.dom('input').hasValue('');
});
in credit-card-input.js American Express card mask must be '9999-999999-99999' instead of '9999-9999999-99999'.
Written one number more.
Amex cards have a total of 15 digits divided in three sections: first section has 4 digits, second section has 6 digits and the thirs section has 5 digits.
http://blog.unibulmerchantservices.com/10-signs-of-a-valid-american-express-card/
I really need to use the setValue functionality that exists in Inputmask 4.x
I have upgraded the dependency and it works for my case (only currency/numeric), but several tests are breaking around date masking.
When I run
{{number-input class="form-control" unmaskedValue=vehicleService.cost group=true groupSize=3 separator="," decimal=false radix="."}}
I get the following error when I hit the backspace key:
Uncaught TypeError: Cannot read property 'radixPoint' of undefined
a.extend.numeric.canClearPosition @ jquery.inputmask.bundle.min.js:11o @ jquery.inputmask.bundle.min.js:8R @ jquery.inputmask.bundle.min.js:9S @ jquery.inputmask.bundle.min.js:9a.each.a.each.b.handler @ jquery.inputmask.bundle.min.js:8jQuery.event.dispatch @ jquery.js:4670jQuery.event.add.elemData.handle @ jquery.js:4338
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.