allowType

A quick function to allow type into input

allowType(selector, option, length, toCase)

• selector (Event|Selector|Node)

• option

  • alpha - (alphabets only no space)
  • alphaspace (alphabets with space)
  • alphanum (alphanumeric without space)
  • slug (alphanumeric slug)
  • number (numbers only)
  • mobile (10 digit Indian mobile number)
  • decimal (decimal number with decimals digit length)
  • pincode (Indian pin code)
  • pan (Indian pan card number)
  • ifsc (IFSC - Indian Financial System Code)

• length (define return length)

• toCase

  • upper (Uppercase)
  • lower (Lowercase)
  • title (Titlecase)
  • word (Wordcase)

Deployment

To use allowType include allowtype.js just above closing body tag into html

  <script src="allowtype.js"></script>

OR use jsDeliver CDN

  <script src="https://cdn.jsdelivr.net/npm/allowtype@1.2.4/allowtype.min.js"></script>

OR use unpkg CDN

  <script src="https://unpkg.com/allowtype@1.2.4/allowtype.js"></script>

Usage

Inline Uses:

Allow alpha with length 10 characters

<input type="text" oninput="allowType(event, 'alpha', 10)">

Allow alphanumeric only

<input type="text" oninput="allowType(event, 'alphanum', 10)">

Allow slug with dash (-)

<input type="text" oninput="allowType(event, 'slug')">

Allow numbers only

<input type="text" oninput="allowType(event, 'number')">

Allow decimals with two decimal places

<input type="text" oninput="allowType(event, 'decimal', 2)">

Allow alpha with no length limit and convert to uppercase

<input type="text" oninput="allowType(event, 'alpha', false, 'upper')">

Allow Indian pincode

<input type="text" oninput="allowType(event, 'pincode')">

Allow Indian PAN card number

<input type="text" oninput="allowType(event, 'pan')">

Allow IFSC (Indian Financial System) Code

<input type="text" oninput="allowType(event, 'ifsc')">

Using EventListener

<input type="text" id="number-input">
<script>
  document.querySelector('#number-input')
  .addEventListener('input', function(e) {
    allowType(this, 'number');
  })
</script>

Using React

npm i allowtype

import allowtype from 'allowtype';

function NumberOnlyInput() {
  function handleOnInput(event) {
    allowtype(event, 'number');
  }

  return (<>
    <input type="text" onInput={handleOnInput} />
  </>);
}

export default NumberOnlyInput;

useState hook to manage value state

import allowtype from 'allowtype';
import { useState } from "react";

function NumberOnlyInput() {
  const [ value, setValue ] = useState('');

  return (<>
    <input type="text" value={value} onInput={(event) => allowtype(event, 'number', null, false, setValue)} />
  </>);
}

export default NumberOnlyInput;

Author

• Harshal Khairnar