目次
01. 仕様
02. 使用例
・カーソル移動時/Enterキー押下時に値を取得する(changeイベント)
・値をコピーする(document.execCommand("copy"))
03. CSS
テキストボックスとは
実際のテキストボックス(Text box)です。文字を入力できます。
上記テキストボックスのhtmlのコードです。
<input type="text" id="txt1" maxlength="5" />
・テキストボックスは、改行を含めない文字を入力します。
・改行を含める文字の場合はテキストエリアを使用します。
・inputタグでtypeにtextを指定します。
・idの値で特定します。
・maxlengthで最大の文字入力数を指定できます。
・CSSで横幅や文字の大きさを指定できます。
・テキストボックスに入力された値はJavaScriptで取得できます。
・placeholder(プレースホルダー)の指定が可能です。
placeholderとは
テキストボックスにplaceholderを指定した例です。薄い文字が表示されます。
上記のplaceholderを指定したコードです。
<input type="text" id="txt1" maxlength="5" placeholder="test" />
・placeholderは、入力例、ダミーテキストの意味で初期表示時に薄い文字が表示されます。
・利用者に入力のヒントを与えます。入力自体に影響はありません。
テキストボックスの値を取得する
ボタンを押すとテキストボックスに入力された値をJavaScriptで取得し画面に表示します。
Value:
上記サンプルのコード
<p>Value:<span id="span1"></span></p>
<input type="text" value="red" id="text1" maxlength="10" />
<input type="button" value="getValue" onclick="getValue1()" />
<script>
function getValue1() {
const t1 = document.getElementById("text1").value;
document.getElementById("span1").textContent = t1;
}
</script>
2行目は、「input type="text"」があるのでテキストボックスです。
3行目は、「input type="button"」があるのでボタンです。
ボタンをクリックすると「onclick="getValue1()"」により6行目の関数が実行されます。
7行目は、getElementByIdメソッドで3行目の「id="text1"」のtext1を指定し、.valueで「value="red"」のredを取得し変数「t1」にセットします。
9行目は、変数「t1」の値を1行目の「id="span1"」の箇所に表示します。
getElementByIdの構造
変数 = document.getElementById(idの値).value; |
テキストボックスに値を設定する
ボタンを押すとテキストボックスにJavaScriptで文字を設定します。
上記サンプルのコード
<input type="text" value="red" id="text2" maxlength="5" />
<input type="button" value="setValue" onclick="setValue1()" />
<input type="button" value="clear" onclick="clear1()" />
<script>
function setValue1() {
document.getElementById("text2").value = "blue";
}
function clear1() {
document.getElementById("text2").value = "";
}
</script>
1行目は、「input type="text"」があるのでテキストボックスです。
2行目は、「input type="button"」があるのでボタンです。
ボタンをクリックすると「onclick="setValue1()"」により6行目の関数が実行されます。
7行目は、getElementByIdメソッドで1行目のID「text2」を指定し、valueの値に"blue"をセットしています。
10行目は、空文字("")をセットすることによりテキストボックスをクリアします。
getElementByIdの構造
document.getElementById(idの値).value = 値; |
IDでなくformで指定する場合
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」に代入します。
入力時に値を取得する(inputイベント)
テキストボックスに入力した値を画面に表示します。
取得した値
上記サンプルのコード
<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キー押下時に値を取得する(changeイベント)
値を入力し、カーソル移動時または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)
Focusを押すとテキストボックスにフォーカスがあたります。Blurを押すとフォーカスが外れます。
上記サンプルのコード
<input type="text" value="red" id="textfoc" maxlength="5" />
<input type="button" value="Focus" onclick="setFocus()" />
<input type="button" value="Blur (外す)" onclick="setBlur()" />
<script>
function setFocus() {
const t1 = document.getElementById("textfoc");
t1.focus();
}
function setBlur() {
const t1 = document.getElementById("textfoc");
t1.blur();
}
</script>
8行目のfocusは、フォーカスを当てます。
12行目のblurは、フォーカスを外します。
全選択にする(select)/外す(blur)
Selectを押すと値を全選択します。Blurを押すと選択が外れます。
上記サンプルのコード
<input type="text" value="red" id="textsel" maxlength="5" />
<input type="button" value="Select" onclick="setSelect()" />
<input type="button" value="Blur (外す)" onclick="setBlur()" />
<script>
function setSelect() {
const t1 = document.getElementById("textsel");
t1.select();
}
function setBlur() {
const t1 = document.getElementById("textsel");
t1.blur();
}
</script>
8行目のselectは、値を全選択にします。
12行目のblurは、値の全選択を外します。
値をコピーする(document.execCommand("copy"))
値を全選択してコピーします。値はテキスト等に貼り付けできます。
上記サンプルのコード
<input type="text" value="red" id="textcopy" maxlength="10" />
<input type="button" value="copyText" 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行目は、テキストボックスの書き込みを不可にしています。
テキストボックスのフォントサイズを変更
フォントサイズを24pxにしています。
上記サンプルのコード
<style>
input[type="text"].css1 {
font-size: 24px;
}
</style>
<input type="text" value="red" class="css1" maxlength="10" />
テキストボックスの幅を変更
テキストボックスの幅を500pxに指定しています。
上記サンプルのコード
<style>
input[type="text"].css2 {
width: 500px;
}
</style>
<input type="text" value="red" class="css2" maxlength="10" />
関連の記事