テキスト入力欄に文字を入力するとUTF16と16進数欄にそれぞれの数値が入ります
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳
この機能がやること
指定したHTMLファイルを表示する
|
index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 360px;
padding: 15px;
border-radius: 2px;
border: solid 1px lightgray;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
textarea,
input[type='text'] {
width: 95%;
font-size: 15px;
margin: 5px;
}
</style>
</head>
<body>
<div class='card'>
<p>
<label>テキスト入力欄</label>
<input type='text' id='keywords' class='text_midium'>
</p>
<p>
<label>UTF16</label>
<textarea id='ta'></textarea>
</p>
<p>
<label>16進数</label>
<textarea id='ta2'></textarea>
</p>
</div>
<script>
var keywords = document.getElementById('keywords')
var ta = document.getElementById('ta')
var ta2 = document.getElementById('ta2')
keywords.focus()
keywords.onkeyup = split_text
function split_text() {
var str = keywords.value
var utf16 = []
var hexadecimal = []
for (var i = 0; i < str.length; i++) {
utf16.push(str.charCodeAt(i))
hexadecimal.push(utf16[i].toString(16));
}
ta.value = utf16
ta2.value = hexadecimal
}
</script>
</body>
</html>
|
意訳
cardのスタイル
幅
内側の余白
角丸
枠線
影
textareaと
input type='text'のスタイル
幅
文字の起きさ
外側の余白
文字入力欄
UTF16の結果を入れる欄
16進数の結果を入れる欄
idがkeywordsの要素を取得
idがtaの要素を取得
idがta2の要素を取得
文字の入力欄をフォーカスする
文字が入力されたらsplit_textを実行する
この機能がやること
入力された文字を取得する
utf16の結果を入れる配列を用意する
16進数の結果を入れる配列を用意する
入力された文字の数だけ以下を繰り返す
UTF16の値を表す数値を配列に追加する
16進数を配列に追加する
taにresultを入れる
ta2にresult2を入れる
|
