LANG SELRCT

コードを書く場所についてはこちら

2018年3月8日木曜日

placeholder内で改行する


placeholderのテキストを改行する方法がわからず
いろいろ試してJavaScriptで実現したコードを書き残しておきます





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




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea id="ta" style="height:10em;"></textarea>
  <script>
    document.addEventListener('DOMContentLoaded', set_placeholder());
    
    function set_placeholder() {
      var ta = document.getElementById("ta");
      var newline = "\n";
      var lines = [
        "1行目に表示するテキスト",
        "2行目に表示するテキスト",
        "3行目に表示するテキスト"
      ];
      var message = "";
      for (var i = 0; i < lines.length; i++) {
        message += lines[i] + newline;
      }
      ta.setAttribute("placeholder", message);
    }
  </script>
</body>
</html>
意訳
 


textareaを用意する

HTMLドキュメントが読み込まれたらset_placeholder()を実行する

この機能がやること
idがtaの要素を取得する
for文で改行を入れるために"\n"をnewlineに入れる
placeholderに表示したいテキストを入れる配列を用意する




配列の要素と改行を結合したmessageの入れ物を用意して
配列の要素の数だけ以下を繰り返す
messageに配列の要素を一つずつ改行をつけて結合する

taのplaceholderにmessageを設定する