キャレットの移動とテキスト選択をしてみる
- 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文字目までを選択する この機能がやること テキストエリアを全選択する |
参考
HTMLInputElement.setSelectionRange()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
HTMLInputElement.select()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
HTMLInputElement.setSelectionRange()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
HTMLInputElement.select()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
