enigma-bbs/art/views/mask_edit_text_view.html

2475 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="/enigma-bbs/assets/images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/enigma-bbs/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="/enigma-bbs/assets/images/favicon-32x32.png">
<link rel="stylesheet" href="/enigma-bbs/assets/css/style.css?v=">
<!-- Begin Jekyll SEO tag v2.7.1 -->
<title>Mask Edit Text View | ENiGMA½ BBS Software</title>
<meta name="generator" content="Jekyll v4.2.1" />
<meta property="og:title" content="Mask Edit Text View" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Mask Edit Text View A mask edit text view supports editing form values on a screen. This can be for new entry as well as editing existing values. Unlike a edit text view, the mask edit text view uses a mask pattern to specify what format the values should be entered in." />
<meta property="og:description" content="Mask Edit Text View A mask edit text view supports editing form values on a screen. This can be for new entry as well as editing existing values. Unlike a edit text view, the mask edit text view uses a mask pattern to specify what format the values should be entered in." />
<meta property="og:site_name" content="ENiGMA½ BBS Software" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2022-10-01T17:54:04+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Mask Edit Text View" />
<script type="application/ld+json">
{"datePublished":"2022-10-01T17:54:04+00:00","description":"Mask Edit Text View A mask edit text view supports editing form values on a screen. This can be for new entry as well as editing existing values. Unlike a edit text view, the mask edit text view uses a mask pattern to specify what format the values should be entered in.","mainEntityOfPage":{"@type":"WebPage","@id":"/enigma-bbs/art/views/mask_edit_text_view.html"},"url":"/enigma-bbs/art/views/mask_edit_text_view.html","@type":"BlogPosting","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"/enigma-bbs/assets/images/enigma-logo.png"}},"headline":"Mask Edit Text View","dateModified":"2022-10-01T17:54:04+00:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<div id="container">
<div class="sidebar" id="sidebar">
<hr class="mobile-divide">
<div class="container">
<a href="/enigma-bbs/"><img src="/enigma-bbs/assets/images/enigma-logo.png" class="logo" alt="Enigma logo"></a>
</div>
<ul>
<li>Installation</li>
<ul>
<li><a href="/enigma-bbs/installation/installation-methods.html">Installation Methods</a></li>
<li><a href="/enigma-bbs/installation/install-script.html">Install Script</a></li>
<li><a href="/enigma-bbs/installation/docker.html">Docker</a></li>
<li><a href="/enigma-bbs/installation/manual.html">Manual Installation</a></li>
<li>OS / Hardware Specific</li>
<ul>
<li><a href="/enigma-bbs/installation/hardware/rpi.html">Raspberry Pi</a></li>
<li><a href="/enigma-bbs/installation/hardware/windows.html">Installation Under Windows</a></li>
</ul>
<li><a href="/enigma-bbs/installation/network.html">Network Setup</a></li>
<li><a href="/enigma-bbs/installation/testing.html">Testing Your Installation</a></li>
<li><a href="/enigma-bbs/installation/production.html">Production Installation</a></li>
</ul>
<li>Configuration</li>
<ul>
<li><a href="/enigma-bbs/configuration/creating-config.html">Creating Initial Config Files</a></li>
<li><a href="/enigma-bbs/configuration/sysop-setup.html">SysOp Setup</a></li>
<li><a href="/enigma-bbs/configuration/config-files.html">Configuration Files</a></li>
<li><a href="/enigma-bbs/configuration/config-hjson.html">System Configuration</a></li>
<li><a href="/enigma-bbs/configuration/hjson.html">HJSON Config Files</a></li>
<li><a href="/enigma-bbs/configuration/menu-hjson.html">Menu HSJON</a></li>
<li><a href="/enigma-bbs/configuration/directory-structure.html">Directory Structure</a></li>
<li><a href="/enigma-bbs/configuration/external-binaries.html">External Support Binaries</a></li>
<li><a href="/enigma-bbs/configuration/archivers.html">Archivers</a></li>
<li><a href="/enigma-bbs/configuration/file-transfer-protocols.html">File Transfer Protocols</a></li>
<li><a href="/enigma-bbs/configuration/email.html">Email</a></li>
<li><a href="/enigma-bbs/configuration/colour-codes.html">Colour Codes</a></li>
<li><a href="/enigma-bbs/configuration/event-scheduler.html">Event Scheduler</a></li>
<li><a href="/enigma-bbs/configuration/acs.html">Access Condition System (ACS)</a></li>
<li><a href="/enigma-bbs/configuration/security.html">Security</a></li>
</ul>
<li>Miscellaneous</li>
<ul>
<li><a href="/enigma-bbs/misc/user-interrupt.html">User Interruptions</a></li>
</ul>
<li>File Base</li>
<ul>
<li><a href="/enigma-bbs/filebase/index.html">About File Areas</a></li>
<li><a href="/enigma-bbs/filebase/first-file-area.html">Configuring a File Base</a></li>
<li><a href="/enigma-bbs/filebase/acs.html">ACS</a></li>
<li><a href="/enigma-bbs/filebase/uploads.html">Uploads</a></li>
<li><a href="/enigma-bbs/filebase/web-access.html">Web Access</a></li>
<li><a href="/enigma-bbs/filebase/tic-support.html">TIC Support</a></li>
<li><a href="/enigma-bbs/filebase/network-mounts-and-symlinks.html">Network Mounts &amp; Symlinks</a></li>
</ul>
<li>Message Areas</li>
<ul>
<li><a href="/enigma-bbs/messageareas/configuring-a-message-area.html">Message Base</a></li>
<li><a href="/enigma-bbs/messageareas/message-networks.html">Message Networks</a></li>
<li><a href="/enigma-bbs/messageareas/bso-import-export.html">BSO Import / Export</a></li>
<li><a href="/enigma-bbs/messageareas/netmail.html">Netmail</a></li>
<li><a href="/enigma-bbs/messageareas/qwk.html">QWK Support</a></li>
<li><a href="/enigma-bbs/messageareas/ftn.html">FidoNet-Style Networks (FTN)</a></li>
</ul>
<li>Art</li>
<ul>
<li><a href="/enigma-bbs/art/general.html">General Art Information</a></li>
<li><a href="/enigma-bbs/art/themes.html">Themes</a></li>
<li><a href="/enigma-bbs/art/mci.html">MCI Codes</a></li>
<li>Views</li>
<ul>
<li><a href="/enigma-bbs/art/views/button_view.html">Button View</a></li>
<li><a href="/enigma-bbs/art/views/edit_text_view.html">Edit Text View</a></li>
<li><a href="/enigma-bbs/art/views/full_menu_view.html">Full Menu View</a></li>
<li><a href="/enigma-bbs/art/views/horizontal_menu_view.html">Horizontal Menu View</a></li>
<li class="active-nav">Mask Edit Text View</li>
<li><a href="/enigma-bbs/art/views/multi_line_edit_text_view.html">Multi Line Edit Text View</a></li>
<li><a href="/enigma-bbs/art/views/predefined_label_view.html">Predefined Label View</a></li>
<li><a href="/enigma-bbs/art/views/spinner_menu_view.html">Spinner Menu View</a></li>
<li><a href="/enigma-bbs/art/views/text_view.html">Text View</a></li>
<li><a href="/enigma-bbs/art/views/toggle_menu_view.html">Toggle Menu View</a></li>
<li><a href="/enigma-bbs/art/views/vertical_menu_view.html">Vertical Menu View</a></li>
</ul>
</ul>
<li>Servers</li>
<ul>
<li>Login Servers</li>
<ul>
<li><a href="/enigma-bbs/servers/loginservers/telnet.html">Telnet Server</a></li>
<li><a href="/enigma-bbs/servers/loginservers/ssh.html">SSH Server</a></li>
<li><a href="/enigma-bbs/servers/loginservers/websocket.html">Web Socket / Web Interface Server</a></li>
</ul>
<li>Content Servers</li>
<ul>
<li><a href="/enigma-bbs/servers/contentservers/web-server.html">Web Server</a></li>
<li><a href="/enigma-bbs/servers/contentservers/gopher.html">Gopher Server</a></li>
<li><a href="/enigma-bbs/servers/contentservers/nntp.html">NNTP Server</a></li>
</ul>
</ul>
<li>Modding</li>
<ul>
<li><a href="/enigma-bbs/modding/local-doors.html">Local Doors</a></li>
<li><a href="/enigma-bbs/modding/door-servers.html">Door Servers</a></li>
<li><a href="/enigma-bbs/modding/telnet-bridge.html">Telnet Bridge</a></li>
<li><a href="/enigma-bbs/modding/existing-mods.html">Existing Mods</a></li>
<li><a href="/enigma-bbs/modding/file-area-list.html">File Area List</a></li>
<li><a href="/enigma-bbs/modding/last-callers.html">Last Callers</a></li>
<li><a href="/enigma-bbs/modding/whos-online.html">Who's Online</a></li>
<li><a href="/enigma-bbs/modding/user-list.html">User List</a></li>
<li><a href="/enigma-bbs/modding/msg-conf-list.html">Message Conference List</a></li>
<li><a href="/enigma-bbs/modding/msg-area-list.html">Message Area List</a></li>
<li><a href="/enigma-bbs/modding/bbs-list.html">BBS List</a></li>
<li><a href="/enigma-bbs/modding/rumorz.html">Rumorz</a></li>
<li><a href="/enigma-bbs/modding/file-transfer-protocol-select.html">File Transfer Protocol Select</a></li>
<li><a href="/enigma-bbs/modding/onelinerz.html">Onelinerz</a></li>
<li><a href="/enigma-bbs/modding/show-art.html">The Show Art Module</a></li>
<li><a href="/enigma-bbs/modding/file-base-download-manager.html">File Base Download Manager</a></li>
<li><a href="/enigma-bbs/modding/file-base-web-download-manager.html">File Base Web Download Manager</a></li>
<li><a href="/enigma-bbs/modding/set-newscan-date.html">Set Newscan Date Module</a></li>
<li><a href="/enigma-bbs/modding/node-msg.html">Node to Node Messaging</a></li>
<li><a href="/enigma-bbs/modding/top-x.html">TopX</a></li>
<li><a href="/enigma-bbs/modding/user-2fa-otp-config.html">2FA/OTP Config</a></li>
<li><a href="/enigma-bbs/modding/autosig-edit.html">Auto Signature Editor</a></li>
<li><a href="/enigma-bbs/modding/menu-modules.html">Menu Modules</a></li>
</ul>
<li>Administration</li>
<ul>
<li><a href="/enigma-bbs/admin/administration.html">Administration</a></li>
</ul>
<li>Modding</li>
<ul>
<li><a href="/enigma-bbs/modding/wfc.html">Waiting For Caller (WFC)</a></li>
</ul>
<li>Administration</li>
<ul>
<li><a href="/enigma-bbs/admin/oputil.html">oputil</a></li>
<li><a href="/enigma-bbs/admin/updating.html">Updating</a></li>
</ul>
<li>Troubleshooting</li>
<ul>
<li><a href="/enigma-bbs/troubleshooting/monitoring-logs.html">Monitoring Logs</a></li>
</ul>
</ul>
</div>
<div class="main_area">
<div class="container">
<section id="main_content">
<div class="PageNavigation">
<a class="btn" style="float:left;margin-right: 20px;" href="/enigma-bbs/art/views/horizontal_menu_view.html">« Horizontal Menu View</a>
<a href="#sidebar" class="btn menu_button">MENU</a>
<a class="btn" style="float: right;margin-left: 20px" href="/enigma-bbs/art/views/multi_line_edit_text_view.html">Multi Line Edit Text View »</a>
<br clear="both">
</div>
<div class="page">
<h1 class="page-title">Mask Edit Text View</h1>
<h2 id="mask-edit-text-view">Mask Edit Text View</h2>
<p>A mask edit text view supports editing form values on a screen. This can be for new entry as well as editing existing values. Unlike a edit text view, the mask edit text view uses a mask pattern to specify what format the values should be entered in.</p>
<h2 id="general-information">General Information</h2>
<blockquote>
<p><img class="emoji" title=":information_source:" alt=":information_source:" src="https://github.githubassets.com/images/icons/emoji/unicode/2139.png" height="20" width="20"> A mask edit text view is defined with a percent (%) and the characters ME, followed by the view number. For example: <code class="language-plaintext highlighter-rouge">%ME1</code>. This is generally used on a form in order to allow a user to enter or edit a text value.</p>
</blockquote>
<blockquote>
<p><img class="emoji" title=":information_source:" alt=":information_source:" src="https://github.githubassets.com/images/icons/emoji/unicode/2139.png" height="20" width="20"> See <a href="/enigma-bbs/art/mci.html">MCI</a> for general information on how to use views and common configuration properties available for them.</p>
</blockquote>
<h3 id="properties">Properties</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">textStyle</code></td>
<td>Sets the standard (non-focus) text style. See <strong>Text Styles</strong> in <a href="/enigma-bbs/art/mci.html">MCI</a>
</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">focusTextStyle</code></td>
<td>Sets the focus text style. See <strong>Text Styles</strong> in <a href="/enigma-bbs/art/mci.html">MCI</a>
</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">argName</code></td>
<td>Sets the argument name for this value in the form</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">maxLength</code></td>
<td>Sets the maximum number of characters that can be entered. <em>Not normally useful, set the mask pattern as needed instead</em>
</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">focus</code></td>
<td>Set to true to capture initial focus</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">maskPattern</code></td>
<td>Sets the mask pattern. See <strong>Mask Pattern</strong> below</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">fillChar</code></td>
<td>Specifies a character to fill extra space in the text entry with. Defaults to an empty space</td>
</tr>
</tbody>
</table>
<h3 id="mask-pattern">Mask Pattern</h3>
<p>A <code class="language-plaintext highlighter-rouge">maskPattern</code> must be set on a mask edit text view (not doing so will cause the view to be focusable, but no text can be input). The <code class="language-plaintext highlighter-rouge">maskPattern</code> is a set of characters used to define input, as well as optional literal characters that can be entered into the pattern that will always be entered into the input. The following mask characters are supported:</p>
<table>
<thead>
<tr>
<th>Mask Character</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>#</td>
<td>Numeric input, one of 0 through 9</td>
</tr>
<tr>
<td>A</td>
<td>Alphabetic, one of a through z or A through Z</td>
</tr>
<tr>
<td>@</td>
<td>Alphanumeric, matches one of either Numeric or Alphabetic above</td>
</tr>
<tr>
<td>&amp;</td>
<td>Printable, matches one printable character including spaces</td>
</tr>
</tbody>
</table>
<p>Any value other than the entries above is treated like a literal value to be displayed in the patter. Multiple pattern characters are combined for longer inputs. Some examples could include:</p>
<table>
<thead>
<tr>
<th>Pattern</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">AA</code></td>
<td>Matches up to two alphabetic characters, for example a state name (i.e. “CA”)</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">###</code></td>
<td>Matches up to three numeric characters, for example an age (i.e. 25)</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">###-###-####</code></td>
<td>A pattern matching a phone number with area code</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">##/##/####</code></td>
<td>Matches a date of type month/day/year or day/month/year (i.e. 01/01/2000)</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">##-AAA-####</code></td>
<td>Matches a date of type day-month-year (i.e. 01-MAR-2010)</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge"># foot ## inches</code></td>
<td>Matches a height in feet and inches (i.e. 6 foot 2 inches)</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<p><img src="../../assets/images/mask_edit_text_view_example1.gif" alt="Example" title="Masked Text Edit View"></p>
<details>
<summary>Configuration fragment (expand to view)</summary>
<div>
<div class="language-plaintext highlighter-rouge">
<div class="highlight"><pre class="highlight"><code>ME1: {
argName: height
fillChar: "#"
maskPattern: "# ft. ## in."
}
</code></pre></div> </div>
</div>
</details>
</div>
<div class="PageNavigation">
<a class="btn" style="float:left;margin-right: 20px;" href="/enigma-bbs/art/views/horizontal_menu_view.html">« Horizontal Menu View</a>
<a class="btn" style="float: right;margin-left: 20px" href="/enigma-bbs/art/views/multi_line_edit_text_view.html">Multi Line Edit Text View »</a>
<br clear="both">
</div>
</section>
</div>
</div>
</div>
</body>
</html>