Small and Independent Provider Component for Simple Element Auto-inputting

react-auto-tab

This is a lightweight package that allows you to easily implement auto-tabbing (focusing the next input), even in your existing project. You can auto-tab forward on maxLength, keypress, or both! You can even reverse-tab on backspacing an empty input!

Demo / Example

[Go to this page to see a live demo!] (https://okdv.github.io/react-auto-tab/)

Installation

Use the package manager npm to install react-auto-tab.

npm install --save react-auto-tab

Basic Usage

To start, all you have to do is wrap your code in the <AutoTabProvider> element. Wrap each group that you would like have auto-tabbing in. All input, textarea and select elements are included as focusable, by default

import React from 'react'
import { AutoTabProvider } from 'react-auto-tab'

const App = () => {
  return (
    <AutoTabProvider>
      <label>Birthday: </label>
      <input type='text' maxLength='2' placeholder='MM' />
      <span>/</span>
      <input type='text' maxLength='2' placeholder='DD' />
      <span>/</span>
      <input type='text' maxLength='4' placeholder='YYYY' />
    </AutoTabProvider>
  )
}

Props

There are a few props available. Only one prop is currently unique to the children elements, none are unique to AutoTabProvider.

To pass props to the wrapping <div>, which replaces <AutoTabProvider> in the DOM, include each props as an object property. Pass this object to the element with the settings prop.

const settings = {
  className: 'myClass',
  id: 'myId',
  focusonkey: 'enter'
  //...
}
return <AutoTabProvider settings={settings}>...</AutoTabProvider>

To pass props to a child of <AutoTabProvider>, just include it as a prop on the element

<AutoTabProvider>
  <label for="myInput-1" className="myClass" myId="myId" style="">You</label>
  <input type="text" ignorefocus="{1}" className="myClass" maxlength="2" />
  <span className="mySpan">Are</span>
  <input
    type="number"
    customProp="customValue"
    focusonmax="false"
    focusonkey="enter"
  />
  <p>Awesome</p>
  <input type="text" maxlength="3" />
</AutoTabProvider>

These are all of the properties that can be use in AutoTabProvider.props.settings as well as props on children elements. The parent settings will set the behavior for all elements, unless the same prop is present on a child.

  • prevonkey: integer Toggle back-tab/focus previous on backspacing an empty input, {1} or ‘true’ by default.
  • nextonkey: string Auto-tab/focus next element on press of this key, for example ‘enter’. null, or off, by default.
  • nextonmax: integer Toggle auto-tab/focus next element on hitting an elements maxLength. If there is no maxLength on that element, it will be 0 or ‘false’. 1, or true by default.

There is currently only one prop unique to children, and no props unique to the parent settings. The below prop is unique to focusable children elements.

  • ignorefocus: integer If set to 1, element will be ignored and ‘jumped’ in the focus sequence. 0, or false, by default

As a note, nextonmax and nextonkey can be active at the same time and running whichever is triggered first. If you have maxLength set and do not want to auto-tab on max length, nextonmax must be disabled.

Styling and Other Info

Styling, and using your own props on both AutoTabProvider and its children, is super easy. Just include whatever props, like className, id, style or customProp, using the same technique as the packages props, listed above.

As mentioned, any input, textarea, and select elements are included as focusable, by default. You can use the provided ignore prop on children to skip any of the elements mentioned.

Non-direct children will not be focusable, but they will still be rendered. For example, the input in the below example with id: 'nonDirect' will be skipped without use of ignore, but it will still render

<AutoTabProvider>
  <input type="text" maxlength="2" />
  <div>
    <input type="text" maxlength="3" id="nonDirect" />
  </div>
  <input type="text" maxlength="2" />
</AutoTabProvider>

It is also totally fine to use several AutoTabProvider elements back to back!

Technically, this should work with any input types. That being said, it has only been tested using password, text, and number. When possible, it is recommended to use type text. Please report any found issues with other types using the issues info below.

Examples

Just to make sure all bases are covered here, here are several examples of usage. To see some live examples, you will need to download and run the example from here.

First we will just turn off prevonkey, so when we backspace on an empty element here, it wont back-tab to the previous element.

<AutoTabProvider settings="{{prevonkey:" false}}>
  <input type="text" maxlength="3" />
  <span>-</span>
  <input type="text" maxlength="2" />
  <span>-</span>
  <input type="text" maxlength="4" />
</AutoTabProvider>

Next we will turn on nextonkey and set it to ‘Enter’, expect for the middle input, it will focus on maxLength this. This can be accomplished by simply not setting a maxLength for the other inputs, or you can disable maxLength in the AutoTabProvider settings, and only enable it for the middle input. Lets see both

<AutoTabProvider settings={{nextonkey: 'enter'}}>
   <label>Name</label>
   <input type="text" placeholder="First" />
   <input type="text" maxLength="1" placeholder="M" />
   <span>.  </span>
   <input type="text" placeholder="Last" />
</AutoTabProvider>

<AutoTabProvider settings={{nextonkey: 'enter', nextonmax: 0}}>
   <label>Name</label>
   <input type="text" maxLength="30" placeholder="First" />
   <input type="text" nextonmax={1} maxLength="1" placeholder="M" />
   <span>.  </span>
   <input maxLength="30" type="text" placeholder="Last" />
</AutoTabProvider>

What if you just wanted to ignore the middle name in the above example?

<AutoTabProvider settings={{nextonkey: 'enter'}}>
   <label>Name</label>
   <input type="text" placeholder="First" />
   <input type="text" ignorefocus={1} maxLength="1" placeholder="M" />
   <span>.  </span>
   <input type="text" placeholder="Last" />
</AutoTabProvider>

Anything that you think should be added to the documentation? See how to get in touch in the issues section below

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Issues

If you have any feedback, notice any bugs, or just have a burning question feel free to open an issue on Github.

Download Details:

Author: okdv

Demo: https://okdv.github.io/react-auto-tab/

Source Code: https://github.com/okdv/react-auto-tab

#react #reactjs #javascript

What is GEEK

Buddha Community

Small and Independent Provider Component for Simple Element Auto-inputting

Small and Independent Provider Component for Simple Element Auto-inputting

react-auto-tab

This is a lightweight package that allows you to easily implement auto-tabbing (focusing the next input), even in your existing project. You can auto-tab forward on maxLength, keypress, or both! You can even reverse-tab on backspacing an empty input!

Demo / Example

[Go to this page to see a live demo!] (https://okdv.github.io/react-auto-tab/)

Installation

Use the package manager npm to install react-auto-tab.

npm install --save react-auto-tab

Basic Usage

To start, all you have to do is wrap your code in the <AutoTabProvider> element. Wrap each group that you would like have auto-tabbing in. All input, textarea and select elements are included as focusable, by default

import React from 'react'
import { AutoTabProvider } from 'react-auto-tab'

const App = () => {
  return (
    <AutoTabProvider>
      <label>Birthday: </label>
      <input type='text' maxLength='2' placeholder='MM' />
      <span>/</span>
      <input type='text' maxLength='2' placeholder='DD' />
      <span>/</span>
      <input type='text' maxLength='4' placeholder='YYYY' />
    </AutoTabProvider>
  )
}

Props

There are a few props available. Only one prop is currently unique to the children elements, none are unique to AutoTabProvider.

To pass props to the wrapping <div>, which replaces <AutoTabProvider> in the DOM, include each props as an object property. Pass this object to the element with the settings prop.

const settings = {
  className: 'myClass',
  id: 'myId',
  focusonkey: 'enter'
  //...
}
return <AutoTabProvider settings={settings}>...</AutoTabProvider>

To pass props to a child of <AutoTabProvider>, just include it as a prop on the element

<AutoTabProvider>
  <label for="myInput-1" className="myClass" myId="myId" style="">You</label>
  <input type="text" ignorefocus="{1}" className="myClass" maxlength="2" />
  <span className="mySpan">Are</span>
  <input
    type="number"
    customProp="customValue"
    focusonmax="false"
    focusonkey="enter"
  />
  <p>Awesome</p>
  <input type="text" maxlength="3" />
</AutoTabProvider>

These are all of the properties that can be use in AutoTabProvider.props.settings as well as props on children elements. The parent settings will set the behavior for all elements, unless the same prop is present on a child.

  • prevonkey: integer Toggle back-tab/focus previous on backspacing an empty input, {1} or ‘true’ by default.
  • nextonkey: string Auto-tab/focus next element on press of this key, for example ‘enter’. null, or off, by default.
  • nextonmax: integer Toggle auto-tab/focus next element on hitting an elements maxLength. If there is no maxLength on that element, it will be 0 or ‘false’. 1, or true by default.

There is currently only one prop unique to children, and no props unique to the parent settings. The below prop is unique to focusable children elements.

  • ignorefocus: integer If set to 1, element will be ignored and ‘jumped’ in the focus sequence. 0, or false, by default

As a note, nextonmax and nextonkey can be active at the same time and running whichever is triggered first. If you have maxLength set and do not want to auto-tab on max length, nextonmax must be disabled.

Styling and Other Info

Styling, and using your own props on both AutoTabProvider and its children, is super easy. Just include whatever props, like className, id, style or customProp, using the same technique as the packages props, listed above.

As mentioned, any input, textarea, and select elements are included as focusable, by default. You can use the provided ignore prop on children to skip any of the elements mentioned.

Non-direct children will not be focusable, but they will still be rendered. For example, the input in the below example with id: 'nonDirect' will be skipped without use of ignore, but it will still render

<AutoTabProvider>
  <input type="text" maxlength="2" />
  <div>
    <input type="text" maxlength="3" id="nonDirect" />
  </div>
  <input type="text" maxlength="2" />
</AutoTabProvider>

It is also totally fine to use several AutoTabProvider elements back to back!

Technically, this should work with any input types. That being said, it has only been tested using password, text, and number. When possible, it is recommended to use type text. Please report any found issues with other types using the issues info below.

Examples

Just to make sure all bases are covered here, here are several examples of usage. To see some live examples, you will need to download and run the example from here.

First we will just turn off prevonkey, so when we backspace on an empty element here, it wont back-tab to the previous element.

<AutoTabProvider settings="{{prevonkey:" false}}>
  <input type="text" maxlength="3" />
  <span>-</span>
  <input type="text" maxlength="2" />
  <span>-</span>
  <input type="text" maxlength="4" />
</AutoTabProvider>

Next we will turn on nextonkey and set it to ‘Enter’, expect for the middle input, it will focus on maxLength this. This can be accomplished by simply not setting a maxLength for the other inputs, or you can disable maxLength in the AutoTabProvider settings, and only enable it for the middle input. Lets see both

<AutoTabProvider settings={{nextonkey: 'enter'}}>
   <label>Name</label>
   <input type="text" placeholder="First" />
   <input type="text" maxLength="1" placeholder="M" />
   <span>.  </span>
   <input type="text" placeholder="Last" />
</AutoTabProvider>

<AutoTabProvider settings={{nextonkey: 'enter', nextonmax: 0}}>
   <label>Name</label>
   <input type="text" maxLength="30" placeholder="First" />
   <input type="text" nextonmax={1} maxLength="1" placeholder="M" />
   <span>.  </span>
   <input maxLength="30" type="text" placeholder="Last" />
</AutoTabProvider>

What if you just wanted to ignore the middle name in the above example?

<AutoTabProvider settings={{nextonkey: 'enter'}}>
   <label>Name</label>
   <input type="text" placeholder="First" />
   <input type="text" ignorefocus={1} maxLength="1" placeholder="M" />
   <span>.  </span>
   <input type="text" placeholder="Last" />
</AutoTabProvider>

Anything that you think should be added to the documentation? See how to get in touch in the issues section below

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Issues

If you have any feedback, notice any bugs, or just have a burning question feel free to open an issue on Github.

Download Details:

Author: okdv

Demo: https://okdv.github.io/react-auto-tab/

Source Code: https://github.com/okdv/react-auto-tab

#react #reactjs #javascript

Ethan Hughes

Ethan Hughes

1578498958

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska

  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)

Maska

Demo

Download


2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

v-range-flyout

Demo

Download


3. vue-tel-input

International Telephone Input with Vue.

vue-tel-input

Demo

Download


4. Restricted Input

Allow restricted character sets in input elements.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Restricted Input

Demo

Download


5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Vue Currency Input

Demo

Download


6. vue-fields

Input components for vue.js.

vue-fields

Demo

Download


7. vue-material-input

Simple example of issue I am seeing with input labels.

vue-material-input

Demo

Download


8. vue-tribute

A Vue.js wrapper for Zurb’s Tribute library for native @mentions.

vue-tribute

Demo

Download


9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options

vue-number-smarty

Demo

Download


10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Vue input mask

Demo

Download


11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

vue-r-mask

Demo

Download


12. Vue IP

An ip address input with port and material design support.

Vue IP

Demo

Download


13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

v-money Mask for Vue.js

Demo

Download


14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Vue Masked Input

Demo

Download


15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue’s transition-group
Flexbox

VueJS input component

Demo


I hope you like them!

#vue-js #vue-input #vue-input-component #input-vue

I am Developer

1597489568

Dynamically Add/Remove Multiple input Fields and Submit to DB with jQuery and Laravel

In this post, i will show you how to dynamically add/remove multiple input fields and submit to database with jquery in php laravel framework. As well as, i will show you how to add/remove multiple input fields and submit to database with validation in laravel.

dynamically add remove multiple input fields and submit to database with jquery and laravel app will looks like, you can see in the following picture:

add/remove multiple input fields dynamically with jquery laravel

Laravel - Add/Remove Multiple Input Fields Using jQuery, javaScript

Follow the below given easy step to create dynamically add or remove multiple input fields and submit to database with jquery in php laravel

  • Step 1: Install Laravel App
  • Step 2: Add Database Details
  • Step 3: Create Migration & Model
  • Step 4: Add Routes
  • Step 5: Create Controller by Artisan
  • Step 6: Create Blade View
  • Step 7: Run Development Server

https://www.tutsmake.com/add-remove-multiple-input-fields-in-laravel-using-jquery/

#laravel - dynamically add or remove input fields using jquery #dynamically add / remove multiple input fields in laravel 7 using jquery ajax #add/remove multiple input fields dynamically with jquery laravel #dynamically add multiple input fields and submit to database with jquery and laravel #add remove input fields dynamically with jquery and submit to database #sql

CodingNepal .

CodingNepal .

1615804098

Limit Input Characters using HTML CSS & JavaScript

In this video, I have shown how to limit the number of characters allowed in the form input using only HTML CSS & JavaScript.

#animated input field #how limit input characters in javascript #input field animation #limit input characters

Biz Automation

Biz Automation

1613728380

Best Small Business Management Software

Run your ENTIRE business on a SINGLE suite w/o hidden editions or add-ons. We’re U.S. based and get directly involved in your success in a way our large competitors can’t. **To know more visit us!
**

#best small business management software #small business management software #best erp for small business #cloud based erp solutions #cloud based erp for small business #web based erp system