SOURCE CODE: Characters Used Indicator

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Characters Used Indicator | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="form Uize.Widgets.Bars.UsedAndRemaining.Widget"/>
  <meta name="description" content="Among the creative uses of the bar widget is this characters used indicator for a textarea. As you type, the bar indicates chars used and remaining."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>

  <style type="text/css">
    .fieldHeading {
      position: relative;
      width: 400px;
      height: 23px;
      line-height: 23px;
      font-weight: bold;
      color: #fff;
      background: #000 url(../images/heading-bg.gif) left top repeat-x;
    .charsUsedBar {
      position: absolute;
      left: 0;
      top: 0;
      width: 400px;
      visibility: hidden;
    .explanation {
      margin-bottom: 20px;


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Characters Used Indicator
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/slider-chars-used.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widgets.Bars.UsedAndRemaining.Widget"><code>Uize.Widgets.Bars.UsedAndRemaining.Widget</code></a> is used to provide feedback - as you type - on how many characters are still permitted in the text input. When you focus the text input, the title for the field is replaced by a dynamically updated indicator that informs you of how many characters you've used and how many characters are remaining. As you type more characters, the bar that is displayed beneath the chars summary is advanced from left to right. As the bar gets closer to "full", its color becomes increasingly hotter, until it is finally solid red once all of the allotted characters are used.</p>

  <!-- slider UI -->

      <div class="fieldHeading"">
        Enter a Description (200 character maximum)
        <div id="page-charsUsedBar" class="charsUsedBar"></div>
      <textarea id="page-textArea" style="width: 396px; height: 100px;" wrap="soft"></textarea><br/>

<!-- JavaScript code to make the static slider HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ();

    /*** create the chars used bar widget ***/
      var charsUsedBar = page.addChild (
          usedText:'<%. used %> chars used',
          remainingText:'<%. remaining %> chars remaining',

    /*** function to show/hide chars used indicator ***/
      function showCharsUsedBar (mustShow) {
        if (mustShow) updatecharsUsedBar ();
        page.showNode ('charsUsedBar',mustShow);

    /*** update slider as contents of textarea changes ***/
      function updatecharsUsedBar () {
        charsUsedBar.set ({used:page.getNodeValue ('textArea').length});

    /*** initialize the slider's value to reflect any initial contents in the textarea ***/
      updatecharsUsedBar ();

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** wire up text input ***/
      page.wireNode (
          focus:function () {showCharsUsedBar (true)},
          blur:function () {showCharsUsedBar (false)}