Input Misdirection

Type in one field, watch your text appear in a completely different one. The target shuffles every few seconds.

Demo

Create Account
Just fill out the form...

Try typing in any field, your text goes somewhere else

React

React
1.import { InputMisdirection } from 'anti-ai-ui';
2.

3.// Auto-generate inputs
4.<InputMisdirection
5.  fields={[
6.    { label: 'Username', placeholder: 'Enter username' },
7.    { label: 'Password', placeholder: 'Enter password', type: 'password' },
8.    { label: 'Email', placeholder: 'Enter email', type: 'email' },
9.  ]}
10.  shuffleInterval={3000}
11./>
12.

13.// Or use your own inputs with render props
14.<InputMisdirection shuffleInterval={2000}>
15.  {({ getInputProps }) => (
16.    <form className="my-form">
17.      <input {...getInputProps(0)} className="my-input" />
18.      <input {...getInputProps(1)} className="my-input" />
19.      <input {...getInputProps(2)} className="my-input" />
20.    </form>
21.  )}
22.</InputMisdirection>

Vanilla JS

Vanilla JS
1.import { createInputMisdirection } from 'anti-ai-ui/vanilla';
2.

3.// Auto-generate inputs
4.createInputMisdirection({
5.  container: document.getElementById('form'),
6.  fields: [
7.    { label: 'Username', placeholder: 'Enter username' },
8.    { label: 'Password', placeholder: 'Enter password', type: 'password' },
9.  ],
10.  shuffleInterval: 3000
11.});
12.

13.// Or use your own existing inputs
14.const myInputs = [
15.  document.getElementById('username'),
16.  document.getElementById('email'),
17.  document.getElementById('password'),
18.];
19.

20.const { destroy, shuffleNow } = createInputMisdirection({
21.  inputs: myInputs,
22.  shuffleInterval: 2000
23.});

Props

Prop Type Default Description
fields Array [username, password, email] Field definitions for auto-generated inputs
inputs HTMLInputElement[] undefined Vanilla JS only: your own input elements to apply misdirection to
children function undefined React only: render prop that receives getInputProps(index)
shuffleInterval number 3000 How often to reshuffle which field receives input (ms)
onMisdirect function undefined Callback when input is redirected (intended, actual)