JQCodeInputContrib

Input widget for a series of characters

Description

This extension implements a code input widget providing a restricted way to request codes from a user, such as 6 digits of a two-factor authentication, or bank account information or the like. It converts a normal html input element into an appropriate interface that prevents false inputs as good as possible while also providing a more usable feedback of what kind of information is being requested from the user.

You type:

%JQREQUIRE{"codeinput"}%

<input type="text" class="jqCodeInput" size="6" value="123456" data-separator="-" />

%STARTSECTION{"example1"}%<input type="text" class="jqCodeInput" size="6" value="123456" data-separator="-" />%ENDSECTION{"example1"}%

You get: (if installed)

Syntax

The widget will be initialized for input elements that have got the jqCodeInput class assigned to it. It will then process the <input ...> element by reading its size, value and HTML5 data-... attributes.

Params	Description	Default
size="..."	number of digits to present to the user (mandatory)
value="..."	initial value (note that these should matched the data-allowed-chars parameter
data-allowed-chars="..."	string of allowed characters	0123456789
data-separator="..."	element to be put between the chars of the input	empty
data-focus-char="..."	position which to focus; 0 means focus first char; if left undefined the input field won't be focus	undefined
data-placeholder="..."	backrgound placeholder for fields that haven't got an input yet, e.g. ⋅	undefined
data-group="[023456]"	group input fields by 2,3,4,5 or 6; zero means no grouping	0
data-auto-submit="true/false"	submit the form the code input is an element of as soon as the last character has been entered	false

Examples

<input type='text' class='jqCodeInput' size='3' value='abc' name='code' data-separator='/' data-allowed-chars='abc' />

<input type='text' class='jqCodeInput' size='6' value='abc' data-focus-char='3' data-group='3' data-placeholder='&sdot;' data-separator='/' />

<input type='text' class='jqCodeInput' size='8' data-separator='-' data-allowed-chars='abcdefghijklmnopqrstuvwxyz' data-group='2' />

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)

cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Dependencies

None

Change History

19 Apr 2024	support paste event in input elements
18 Mar 2024	improved backspace behavior
22 Jan 2024	improved design and user experience
18 May 2023	fixed backspace interaction; added placeholder and group options
18 Nov 2019	css fixes
17 Dec 2018	initial release