目次
| textbox | テキストボックスとは |
| テキストボックスの値を取得する | |
| テキストボックスに値を設定する | |
| textbox+α | 入力時に値を取得する |
| 移動時に値を取得する | |
| フォーカスを当てる/外す(focus/blur) | |
| 全選択にする/外す(select/blur) | |
| 値をコピーする(document.execCommand("copy")) | |
| 書き込み不可/可にする(disabled) |
テキストボックスとは
以下は実際のテキストボックスです。文字を入力できます。
上記テキストボックスのhtmlのコードです。
<input type="text" id="txt1" maxlength="5" style="width:200px;"/>
テキストボックスは、改行を含めない文字を入力します。
改行を含める文字の場合はテキストエリアを使用します。
inputタグでtypeにtextを指定します。
maxlengthで最大の文字入力数を指定できます。
CSSで横幅を指定できます。横(width)を200pxにしています。
テキストボックスに入力された値はJavaScriptで取得できます。
placeholder
以下は、テキストボックスにplaceholderを指定した例です。
<input type="text" id="txt1" maxlength="5" placeholder="test" style="width:200px;"/>placeholderは、入力例、ダミーテキストの意味で初期表示時に薄い文字が表示されます。
利用者に入力のヒントを与えます。入力自体に影響はありません。
テキストボックスの値を取得する
ボタンを押すとテキストボックスに入力された値をJavaScriptで取得し画面に表示します。
取得した値
上記サンプルのコード
<p>取得した値 <span id="span1"></span></p>
<label for="text1">入力欄：</label>
<input type="text" value="red" id="text1" maxlength="5" style="width:200px;"/>
<input type="button" value="ボタン" onclick="clickBtn1()" />
<script>
function clickBtn1() {
const t1 = document.getElementById("text1").value;
document.getElementById("span1").textContent = t1;
}
</script>
2行目のlabelはforにある"text1"で3行目のテキストボックスと紐づいています。"入力欄:"の文字をクリックするとテキストボックスにカーソルが入ります。
3行目は、「input type="text"」があるのでテキストボックスです。テキストボックスの長さはCSSでの指定が可能です(style="width:200px;")。
4行目は、「input type="button"」があるのでボタンです。
ボタンをクリックすると「onclick="clickBtn1()"」により7行目の関数が実行されます。
8行目は、getElementByIdメソッドで3行目の「id="text1"」のtext1を指定し、.valueで「value="red"」のredを取得し変数「t1」にセットします。
getElementByIdの構造
| 変数 = document.getElementById(idの値).value; |
getElementByIdは、場所(idの値)を指定し入力値(value値)を取得します。
9行目は、変数「t1」の値を1行目の「id="span1"」の箇所に表示します。
Idを指定しない場合
getElementByIdでIdを指定しない場合は、フォームとnameを指定します。
<p>取得した値 <span id="span1"></span></p>
<form name="form1">
<input type="text" name="text1" value="red" maxlength="5" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<script>
function clickBtn1() {
const t1 = document.form1.text1.value;
document.getElementById("span1").textContent = t1;
}
</script>
9行目は、2行目のフォームのname「form1」と3行目のテキストボックスのname「text1」で対象を特定(3行目)し、そのvalueから値を取得し変数「t1」に代入します。
テキストボックスに値を設定する
ボタンを押すとテキストボックスにJavaScriptで文字を設定します。
上記サンプルのコード
<label for="text2">入力欄：</label>
<input type="text" value="red" id="text2" maxlength="5" style="width:200px;"/>
<input type="button" value="ボタン" onclick="clickBtn2()" />
<input type="button" value="クリア" onclick="clickBtn3()" />
<script>
function clickBtn2() {
document.getElementById("text2").value = "blue";
}
function clickBtn3() {
document.getElementById("text2").value = "";
}
</script>
1行目のlabelはforにある"text2"で2行目のテキストボックスと紐づいています。"入力欄:"の文字をクリックするとテキストボックスにカーソルが入ります。
2行目は、「input type="text"」があるのでテキストボックスです。テキストボックスの長さはCSSでの指定が可能です(style="width:200px;")。
3行目は、「input type="button"」があるのでボタンです。
ボタンをクリックすると「onclick="clickBtn2()"」により7行目の関数が実行されます。
8行目は、getElementByIdメソッドで2行目のID「text2」を指定し、valueの値に"blue"をセットしています。
getElementByIdの構造
| document.getElementById(idの値).value = 値; |
getElementByIdメソッドで場所(idの値)を指定しvalueに値を設定します。
11行目は、空文字("")をセットすることによりテキストボックスをクリアします。
Idを指定しない場合
getElementByIdでIdを指定しない場合は、フォームとnameを指定します。
<form name="form2">
<input type="text" name="text2" value="red" maxlength="5" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn3()" />
<script>
function clickBtn3() {
document.form2.text2.value = "blue";
}
</script>
8行目は、1行目のフォームのname「form2」と2行目のテキストボックスのname「text2」で対象を特定(2行目)し、そのvalueの値に"blue"を代入しています。
入力時に値を取得する
テキストボックスに入力した値を画面に表示します。
取得した値
上記サンプルのコード
<p>取得した値 <span id="span11"></span></p>
<input type="text" value="red" id="text11" maxlength="10" />
<script>
const text = document.getElementById("text11");
text.addEventListener("input", changeText1);
function changeText1() {
document.getElementById("span11").textContent = text.value;
}
</script>
6行目は、addEventListenerで対象にinputイベントが発生した時、8行目の関数を実行します。
移動時に値を取得する
値を入力し、Enterキーを押すまたはカーソルを移動するとテキストボックスの値を取得し画面に表示します。
取得した値
上記サンプルのコード
<p>取得した値 <span id="span3"></span></p>
<input type="text" value="red" id="text3" maxlength="10" />
<script>
const text3 = document.getElementById("text3");
text3.addEventListener("change", changeText);
function changeText() {
document.getElementById("span3").textContent = text3.value;
}
</script>6行目は、addEventListenerで対象にchangeイベントが発生した時、8行目の関数を実行します。
フォーカスを当てる/外す(focus/blur)
ボタンを押すとフォーカスがあたります。ボタンoffを押すとフォーカスが外れます。
上記サンプルのコード
<input type="text" value="red" id="textfoc" maxlength="5" />
<input type="button" value="ボタンon" onclick="clickBtnFoc()" />
<input type="button" value="ボタンoff" onclick="clickBtnBlr()" />
<script>
function clickBtnFoc() {
const t1 = document.getElementById("textfoc");
t1.focus();
}
function clickBtnBlr() {
const t1 = document.getElementById("textfoc");
t1.blur();
}
</script>
8行目のfocusは、フォーカスを当てます。
12行目のblurは、フォーカスを外します。
全選択にする/外す(select/blur)
ボタンonを押すと値を全選択します。ボタンoffを押すと選択が外れます。
上記サンプルのコード
<input type="text" value="red" id="textsel" maxlength="5" />
<input type="button" value="ボタンon" onclick="clickBtnSel()" />
<input type="button" value="ボタンoff" onclick="clickBtnBlr2()" />
<script>
function clickBtnSel() {
const t1 = document.getElementById("textsel");
t1.select();
}
function clickBtnBlr2() {
const t1 = document.getElementById("textsel");
t1.blur();
}
</script>
8行目のselectは、値を全選択にします。
12行目のblurは、値の全選択を外します。
値をコピーする(document.execCommand("copy"))
値を全選択してコピーします。値はテキスト等に貼り付けできます。
上記サンプルのコード
<input type="text" value="red" id="textcopy" maxlength="5" />
<input type="button" value="ボタンon" onclick="clickBtnCopy()" />
<script>
function clickBtnCopy() {
const t1 = document.getElementById("textcopy");
t1.select();
var result = document.execCommand("copy");
}
</script>
7行目は、テキストボックスの値を全選択しています。
8行目は、選択した値をコピーしています。テキスト等にコピーした内容を貼り付けることができます。
書き込み不可/可にする(disabled)
ボタンを押すと入力不可になります。再度ボタンを押すと入力可になります。
上記サンプルのコード
<input type="text" value="red" id="textdis" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtnDisable()" />
<script>
function clickBtnDisable() {
const t1 = document.getElementById("textdis");
if (t1.disabled == false) {
t1.disabled = true;
} else {
t1.disabled = false;
}
}
</script>
8行目は、テキストボックスの書き込みを不可にしています。
関連の記事