textarea.html | Explore in Territory

<!DOCTYPE html>
<html>
  <!--
  Copyright The Closure Library Authors. All Rights Reserved.

  Use of this source code is governed by the Apache License, Version 2.0.
  See the COPYING file for details.
  -->
  <head>
    <title>goog.ui.Textarea</title>
    <script src="../base.js"></script>
    <script>
      goog.require('goog.dom');
      goog.require('goog.events');
      goog.require('goog.events.EventType');
      goog.require('goog.ui.Control');
      goog.require('goog.ui.ControlRenderer');
      goog.require('goog.ui.Textarea');
      goog.require('goog.ui.TextareaRenderer');
      goog.require('goog.userAgent');
    </script>
    <style>
      textarea {
        width: 400px;
        height: 100px;
        padding: 2px;
      }
      fieldset {
        padding: 10px;
        margin: 0 0 1.5em;
      }
      label {
        font-size: 90%;
      }
      #t4 {
        padding-bottom: 3em;
      }
      #t3 {
        filter:progid:DXImageTransform.Microsoft.DropShadow(color='#e7e7e7',
            offX='2',offY='2');
        box-shadow: 2px 2px 0 #e7e7e7;
        -moz-box-shadow: 2px 2px 0 #e7e7e7;
        -webkit-box-shadow: 2px 2px 0 #e7e7e7;
      }
    </style>
  </head>
  <body>
    <h1>goog.ui.Textarea</h1>
    <fieldset>
      <legend>
        The first <strong>Textarea</strong> was created programmatically,
        the second by decorating a <strong>&lt;textarea&gt;</strong>
        element:&nbsp;
    </legend>
    <div id="t1"></div>
    <label>
      Enable textarea:<input type="checkbox" id="t1_enable" checked="checked">
    </label>
    <br>
    <br>
    <textarea id="t2" disabled>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia lorem, in fermentum purus ligula quis nunc. Duis porttitor euismod risus. Nam hendrerit lacus vehicula augue. Duis ante. Aliquam tempor adipiscing sem. Duis eget pede. Vivamus facilisis luctus purus. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tristique, turpis ac nonummy sagittis, leo erat fermentum leo, in pulvinar sapien dui at dolor. </textarea>
    <br>
    <label>Enable textarea:<input type="checkbox" id="t2_enable"></label>
    <br>
  </fieldset>

  <fieldset>
    <legend>
      This is a textarea with a minHeight set to 200px.
    </legend>
    <textarea id="t3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia lorem, in fermentum purus ligula quis nunc.</textarea>
    <br>
    <label>minHeight set:<input type="checkbox" id="t3_toggle"
      checked></label>
    <br>
  </fieldset>

  <fieldset>
    <legend>
      This is a textarea with a padding-bottom of 3em.
    </legend>
    <textarea id="t4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia lorem, in fermentum purus ligula quis nunc.</textarea>
  </fieldset>

  <!-- Event log. -->
  <fieldset id="log-c" class="goog-debug-panel">
    <legend>Event Log</legend>
    <div id="log"></div>
  </fieldset>

  <script>

    // Create the first programmatically.
    var t1 = new goog.ui.Textarea('Hi there, I am a programmatic textarea.');
    t1.render(goog.dom.getElement('t1'));
    goog.events.listen(goog.dom.getElement('t1_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          t1.setEnabled(e.target.checked);
        });


    // Create the second by decorating an element.
    var t2 = new goog.ui.Textarea();
    t2.decorate(goog.dom.getElement('t2'));
    goog.events.listen(goog.dom.getElement('t2_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          t2.setEnabled(e.target.checked);
        });

    // Third is decorated and set to a minHeight.
    var t3 = new goog.ui.Textarea();
    var minHeight = 200;
    t3.setMinHeight(minHeight);
    t3.decorate(goog.dom.getElement('t3'));
    goog.events.listen(goog.dom.getElement('t3_toggle'),
        goog.events.EventType.CLICK,
        function(e) {
          t3.setMinHeight(t3.getMinHeight() ? null : minHeight);
        });

    // With padding-bottom of 3em.
    var t4 = new goog.ui.Textarea();
    t4.decorate(goog.dom.getElement('t4'));
  </script>
  </body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/textarea.html
