LANG SELRCT

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

2018年8月26日日曜日

テキストエリアの末尾でenterキーを押したときに反応させたい


テキストエリア内の末尾にキャレットがあるときに
確定キーを押したらアラートを出したい


デモ





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




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea id="ta"></textarea>
  <script>
    /************************************
    elem(id)
    ************************************/
    function elem(id) {
      return document.getElementById(id);
    }

    /************************************
    イベント
    ************************************/
    ta.onkeyup = ta_keyup;

    /************************************
    ta_keyup
    テキストエリアの末尾で確定キーを押したらアラートを出す

    必要な情報
    キャレットの位置
    テキストエリアの文字数
    押されたキーコード
    ************************************/
    function ta_keyup(e) {
      var where_caret = get_where_caret("ta");
      var len_ta = get_len_elem("ta");
      var key_code = get_key_code(e);
      result_ta_keyup(where_caret, len_ta, key_code);
    }

    function get_where_caret(id) {
      return elem(id).selectionStart; //キャレットの位置を返す
    }

    function get_len_elem(id) {
      return elem(id).value.length; //elemの文字列数を返す
    }

    function get_key_code(e) {
      return e.keyCode; //キーコードを返す
    }

    function result_ta_keyup(where_caret, len_ta, key_code) {
      if (where_caret === len_ta && key_code === 13) {
        alert("hello");
      }
    }
  </script>
</body>
</html>