LANG SELRCT

コードを書く場所

2019年12月8日日曜日

テキストエリアに入力して練習するアプリ


デモ





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea {
        width: 20vw;
        height: 1em;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div id="mainDiv" class="table vertical_top">
      <textarea id="ta0">Outlet malls seem to offer great deals, and the merchandise is so cheap, up to 65 percent off normal retail prices.</textarea>
    </div>
    <script>
      taAutoHeight(elem('ta0'));
      createTa();
      
      function elem(id) {
        return document.getElementById(id);
      }
      
      function createTa() {
        var ta = document.createElement('textarea');
        var parent = elem('mainDiv');
        
        ta.style.height = elem('ta0').style.height;
        
        ta.onkeyup = function(e) { 
          var keycode = e.keyCode;
          var value = this.value;
          var valueSplit = value.split("\n");
          taAutoHeight(this);
          elem('ta0').style.height = this.style.height;
          if (keycode == 13) { //returnキーなら
            if (valueSplit[valueSplit.length - 2] == "") { //改行2つなら
              createTa();
            }
          }
        }

        parent.appendChild(ta);
        ta.focus();
      }
      
      function taAutoHeight(ta){
        if(ta.scrollHeight > ta.offsetHeight){   
          ta.style.height = ta.scrollHeight + "px";
        }
      }      
    </script>
  </body>
</html>





最新の投稿

Salesforceの開発環境を無料で試してみたい(Developers Editoin)

無料トライアルは使用期間が限定されますが、Developers Editionなら条件を満たせば期限に縛られることはないようです。 期限については以下のページに記載がありました。 6ヶ月以上の期間を空けずに継続的に利用をしていれば、あなたのDeveloper Editi...