viclm / numeric-keyboard Goto Github PK
View Code? Open in Web Editor NEWNumber keyboard for mobile browsers
License: MIT License
Number keyboard for mobile browsers
License: MIT License
TS2307: Cannot find module 'numeric-keyboard'.
Webpack shows a warning:
"export 'NumericKeyboard' was not found in 'numeric-keyboard'
And at runtime, there is this error:
numeric_keyboard.vue.js?457d:2 Uncaught TypeError: Cannot read property 'Vue' of undefined
at webpackUniversalModuleDefinition (numeric_keyboard.vue.js?457d:2)
at Module.eval (numeric_keyboard.vue.js?457d:10)
at eval (numeric_keyboard.vue.js:3801)
at Module../node_modules/numeric-keyboard/dist/numeric_keyboard.vue.js (app.js:7422)
at __webpack_require__ (app.js:725)
at fn (app.js:102)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PinPad.vue?vue&type=script&lang=js&:2)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PinPad.vue?vue&type=script&lang=js& (app.js:937)
at __webpack_require__ (app.js:725)
at fn (app.js:102)
Hi,
How do I change the NumericInput label on the enter button and set a custom function on Enter
press?
Thank you
否则不好给键盘加样式。比如z-index之类的。
现在我用此插件和别的插件z-index冲突了。
I have installed numeric-keyboard via npm into the Angular 8 project. I got no errors when I did 'ng serve' but just not seeing the input box getting manifested on the browser. Below is my simple input dialog ... I am thinking that I perhaps need to install additional packages to work with Webpack or something, I added [email protected] but no avail. Any help is appreciated.
import { Component } from '@angular/core';
import { NumericKeyboardModule } from 'numeric-keyboard/dist/numeric_keyboard.angular';
@component({
selector: 'app-root',
template: <div class="input"> <label> Amount: </label> <numeric-input class="numeric-input" type="number" placehold="type something here"></numeric-input> </div>
,
})
export class AppComponent {
public amount: number | string = ''
}
vue项目使用numeric-keyboard,使用build后报错 TypeError: Cannot read property 'format' of undefined
the following piece prompt Cannot read property 'init' of undefined
import { NumericKeyboard } from 'numeric-keyboard'
class App extends React.Component {
press(key) {
...
}
render() {
return <div className="keyboard">
<NumericKeyboard layout="tel" onPress={this.press.bind(this)} />
</div>
}
}
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
Lovely work you gave to the community..
Though i haven't installed the keyboard, and the reason was because i am not sure if this can be used as a pin entry.
I am currently developing an ionic 4 app, and i was hoping i could use this numeric keyboard to achieve pin entry such that, number pad is displayed and the characters would be in password type.
I would like to confirm if this is possible this piece.
Thanks in adv.
'numeric-keyboard': paths.appSrc + '/utils/numeric_keyboard.react.js'
Failed to compile.
./src/utils/numeric_keyboard.react.js
Line 4: 'define' is not defined no-undef
Line 5: 'define' is not defined no-undef
Line 420: Unexpected use of 'self' no-restricted-globals
Line 420: Unexpected use of 'self' no-restricted-globals
Line 420: Unexpected use of 'self' no-restricted-globals
Line 1507: 'DEBUG' is not defined no-undef
Search for the keywords to learn more about each error.
启动时报错
Here is my setup. I am using vue@^2.6.11
<template>
<div class='dialog fixed-bottom'>
<v-numeric-keyboard :layout='PasswordLayout' @press='press' />
</div>
</template>
<script lang='ts'>
import Vue from 'vue';
import { NumericKeyboard, Keys } from 'numeric-keyboard/dist/numeric_keyboard.vue.js';
const PasswordLayout = <Same as in demo folder>
export default Vue.extend({
components: { 'v-numeric-keyboard': NumericKeyboard },
data() { return { PasswordLayout, password: '' }},
methods: {
press(key) {
console.log(key); // Never Fired.
}
}
});
</script>
here is my way to solve this:
...
`if(newValue===''){
_this2.set('value', newValue);
_this2.set('rawValue', newRawValue);
_this2.set('cursorPos', isAdd ? cursorPos + 1 : cursorPos - 1);
_this2.dispatch('input', newValue);
}else if (formatFn(newValue)) {
if (type === 'number') {
if (!RNumber.test(newValue)) {
return;
}
newValue = parseFloat(newValue, 10);
if (isNaN(newValue)) {
newValue = '';
}
} else if (newValue.length > maxlength || type === 'tel' && !RTel.test(newValue)) {
return;
}
_this2.set('value', newValue);
_this2.set('rawValue', newRawValue);
_this2.set('cursorPos', isAdd ? cursorPos + 1 : cursorPos - 1);
_this2.dispatch('input', newValue);
}`
...
I add a jugement when newValue equals '',if there is other way ,please point out
When I try to build a AOT build with Angular 8.* I got the following error:
ERROR in : Unexpected value 'NumericKeyboardModule in app/node_modules/numeric-keyboard/dist/numeric_keyboard.angular.js' imported by the module 'ComponentsModule in app/src/app/components/components.module.ts'. Please add a @NgModule annotation.
Hi, @viclm I am a graphic designer, I want to help others in graphic design.
After I reviewed your project, you have no logo on this project. Therefore I want to contribute to this project by creating a new logo / icon. what do you think?
How can I use it with Angular 8?
In the example, you don't import any component or directive. Then, compiler sends an error:
`ERROR Error: Uncaught (in promise): Error: Template parse errors:
'numeric-input' is not a known element:
If 'numeric-input' is an Angular component, then verify that it is part of this module.
If 'numeric-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]
"): ng:///LoginModule/LoginComponent.html@17:4
'numeric-input' is not a known element:`
I tried to import a "numeric keyboard module" but it doesn't exist.
Hi thanks for this repo its useful. i added this into my project and i am using like below in my angular project
<ng-numeric-input [layout]="'tel'" [class]="'form-control log-input'" [id]="'InmateID'" [entertext]="'Next'" [formControlName]="'InmateID'" [placeholder]="'Type your Inmate ID'" [ngClass]="{ ' is-invalid ': submitted && login.InmateID.errors }" >
i can get error validation message if
i left the textbox by blank. but after entered the value the validation message not hiding.
and also i am not able to read the textbox values. how to read the values entered in textbox, because i need to pass the values to server.
i attached the image too. kindly check with this and help me to solve the issues. thanks once again
用上amfe-flexible 不能够适配
const numericInput = new NumericInput({type: 'number',...});
//1
numericInput.set('value', value);
numericInput.set('rawValue', rawValue);
numericInput.set('cursorPos', cursorPos);
//2
numericInput.setProps({ 'value': value });
I tried those two methods found in source code to change the value.
Sometimes i got error:
Is there any way to make it?
this looks interesting, but how do you suppress the native keyboard reliably?
是否抱歉再次提出issue!
import { NumericKeyboard, NumericInput, Keys } from 'numeric-keyboard/dist/numeric_keyboard.vue.js'
我的疑惑是为什么直接移入会报错的呢???我想不太明白,可以解惑一下吗(你在#9的issue里面用英文说了一下,但是我看不太懂说明意思),十分感谢!
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.