TIP JQCodeInputContrib is not installed on Foswiki.org.

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)

screenshot1.jpg

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. &sdot; 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

PackageForm edit

Author Michae lDaum
Version 1.10
Release 29 Apr 2024
Description Input widget for a series of characters
Copyright 2018-2024, Michael Daum, All Rights Reserved
License GPL (GNU General Public License)
Home http://foswiki.org/Extensions/JQCodeInputContrib
Support http://foswiki.org/Support/JQCodeInputContrib
Repository https://github.com/foswiki/JQCodeInputContrib
ExtensionClassification User interactivity
ExtensionType ContribPackage
Compatibility
IncompatibleWith
ImageUrl screenshot1.jpg
DemoUrl http://
SupportUrl JQCodeInputContrib
ModificationPolicy CoordinateWithAuthor
I Attachment Action Size Date Who Comment
JQCodeInputContrib.md5md5 JQCodeInputContrib.md5 manage 177 bytes 29 Apr 2024 - 10:25 MichaelDaum  
JQCodeInputContrib.sha1sha1 JQCodeInputContrib.sha1 manage 201 bytes 29 Apr 2024 - 10:26 MichaelDaum  
JQCodeInputContrib.tgztgz JQCodeInputContrib.tgz manage 13 K 29 Apr 2024 - 10:25 MichaelDaum  
JQCodeInputContrib.zipzip JQCodeInputContrib.zip manage 19 K 29 Apr 2024 - 10:25 MichaelDaum  
JQCodeInputContrib_installerEXT JQCodeInputContrib_installer manage 5 K 29 Apr 2024 - 10:25 MichaelDaum  
screenshot1.jpgjpg screenshot1.jpg manage 3 K 29 Apr 2024 - 10:25 MichaelDaum  
Topic revision: r4 - 29 Apr 2024, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy