TIP JQCodeInputContrib is not installed on Foswiki.org.


Input widget for a series of characters


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:


<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)



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

Another example making use of all parameters would be

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

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.



Change History

18 Nov 2019 css fixes
17 Dec 2018 initial release

I Attachment Action Size Date Who Comment
JQCodeInputContrib.md5md5 JQCodeInputContrib.md5 manage 177 bytes 18 Nov 2019 - 13:06 MichaelDaum  
JQCodeInputContrib.sha1sha1 JQCodeInputContrib.sha1 manage 201 bytes 18 Nov 2019 - 13:06 MichaelDaum  
JQCodeInputContrib.tgztgz JQCodeInputContrib.tgz manage 12 K 18 Nov 2019 - 13:06 MichaelDaum  
JQCodeInputContrib.zipzip JQCodeInputContrib.zip manage 17 K 18 Nov 2019 - 13:06 MichaelDaum  
JQCodeInputContrib_installerEXT JQCodeInputContrib_installer manage 5 K 18 Nov 2019 - 13:06 MichaelDaum  
screenshot1.jpgjpg screenshot1.jpg manage 3 K 18 Nov 2019 - 13:05 MichaelDaum  
Topic revision: r2 - 18 Nov 2019, 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