viclm/numeric-keyboard

Number keyboard for mobile browsers

numeric-keyboard's Issues

Cannot use with ts

TS2307: Cannot find module 'numeric-keyboard'.

Not working with vue cli 3 (webpack 4)

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)

enter button on NumericInput

Hi,
How do I change the NumericInput label on the enter button and set a custom function on Enter press?
Thank you

建议给键盘的DOM加一个css类

否则不好给键盘加样式。比如z-index之类的。
现在我用此插件和别的插件z-index冲突了。

Cannot get this to work in Angular 8. No error, just not see the input element working.

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>&nbsp;&nbsp;Amount: </label> <numeric-input class="numeric-input" type="number" placehold="type something here"></numeric-input> </div>,
})

export class AppComponent {
public amount: number | string = ''
}

vue build后出现TypeError: Cannot read property 'format' of undefined

vue项目使用numeric-keyboard，使用build后报错 TypeError: Cannot read property 'format' of undefined

NumericKeyboard is not working

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

vanilla 版本 退格键点按过快报错

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

运行在浏览器 TypeError: Cannot call a class as a function

usage for pin

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.

react引入失败

'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.
启动时报错

[Vue] Unable to fire `press` event from NumericKeyboard

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>

when prop 'format' is function,the last character can not be deleted

---

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

keyboard dismiss when the input show up

在vue项目中资源引入报错，为什么的？我感到很困惑

没有配置webpack的resolve， 直接引入的时候为什么会报错的呢

Please add a @NgModule annotation.

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.

new logo

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?

Angular 8

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:

1. If 'numeric-input' is an Angular component, then verify that it is part of this module.

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

Value Get Option From Textbox

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 不能够适配

How to set value dynamically

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?

how to suppress native keyboard

this looks interesting, but how do you suppress the native keyboard reliably?

怎么主动唤起键盘？

引入numeric-keyboard插件的时候不去配置webpack中的reslove.alias为什么不行呢？

是否抱歉再次提出issue!

import { NumericKeyboard, NumericInput, Keys } from 'numeric-keyboard/dist/numeric_keyboard.vue.js'
我的疑惑是为什么直接移入会报错的呢？？？我想不太明白，可以解惑一下吗（你在#9的issue里面用英文说了一下，但是我看不太懂说明意思），十分感谢！