LANG SELRCT

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

2018年6月7日木曜日

setSelectionRangeでテキストエリア内を範囲選択・先頭・末尾にキャレット移動をする


キャレットの移動とテキスト選択をしてみる

  • setSelectionRange()
    • キャレットの移動と範囲選択
  • select()
    • 全選択



先頭にキャレット移動

末尾にキャレット移動

2番目から5番目を選択

全選択



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




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea id="ta">hello</textarea>
  <button id="top_bt">top</button>
  <button id="end_bt">end</button>
  <button id="range_bt">range</button>
  <button id="all_bt">all</button>
  <script>
    var ta = document.getElementById("ta");
    var top_bt = document.getElementById("top_bt");
    var end_bt = document.getElementById("end_bt");
    var range_bt = document.getElementById("range_bt");
    var all_bt = document.getElementById("all_bt");
    
    top_bt.onclick = top_bt_clicked;
    end_bt.onclick = end_bt_clicked;
    range_bt.onclick = range_bt_clicked;
    all_bt.onclick = all_bt_clicked;
    
    function top_bt_clicked() {
      ta.focus();
      ta.setSelectionRange(0, 0);
    }

    function end_bt_clicked() {
      ta.focus();
      var len = ta.value.length;
      ta.setSelectionRange(len, len);
    }

    function range_bt_clicked() {
      ta.focus();
      ta.setSelectionRange(2, 5);
    }

    function all_bt_clicked() {
      ta.select();
    }
  </script>
</body>
</html>

意訳
  


テキストエリア
ボタン




要素を取得する





クリックされたときの処理




この機能がやること
テキストエリアをフォーカス
先頭にキャレットを移動する


この機能がやること
テキストエリアをフォーカス
テキストエリアの文字数
末尾にキャレットを移動する


この機能がやること
テキストエリアをフォーカス
テキストの2文字目から5文字目までを選択する


この機能がやること
テキストエリアを全選択する