【HTML】【JavaScript】基本的なインプット系とたまに使うなんやかんや

最近、仕事柄フロントエンドの開発をする機会が増えました。
ようやくある程度は頭に入ってきたので、逐一調べなくても基本的なものは書けるように。
復習と備忘録としてブログにアウトプットしておきます。

テキストフィールド

・基本的なやつ
何でも入力可能。

<input type="text" />

・数字のみ
半角数字と+、-のみしか入力出来ない。
入力欄の右側にスピンボタン（矢印）が表示され、入力欄内の数値を増減出来る。

<input type="number" />

・何でも入力出来るが初期入力時は半角入力になる
telなので電話番号専用かと思っていましたが何でも入力可能です。
入力欄がアクティブになった時点で半角入力になるので、最初から半角入力させたい時はこれ便利。

<input type="tel" />

・値の取得
「値を表示」ボタン押下で入力欄の値を取得しアラートで表示させます。
document.getElementById()でHTMLタグのidを指定し、後ろに.valueを付けてあげると中身の値を取得出来ます。

function alertValue() {
	 textFieldValue = document.getElementById("textField").value;
	 alert(textFieldValue);
}

<input type="text" id="textField" />
<input type="button" value="値を表示" onClick="alertValue();" />

・初期入力が半角かつ、入力を半角数字のみに制限
JavaScriptで半角数字のみの入力制限を設けます。
半角数字の判定は正規表現で行い、半角数字以外は空白に置換するようにしています。

function checkInput($this) {
	 var replaceValue = $this.value.replace(/[^\d]/,'');
	 if($this.value != replaceValue) {
	 	$this.value = replaceValue;
	 }
}

<input type="tel" onInput="checkInput(this)" />

JavaScriptのif文不要かな？思いつつ、とりあえず書いちゃいました。
やっていることは、置換前と置換後の文字列が違う場合は書き換えるように制御しているだけです。
置換後が同じ場合でも書き換えるように判定なしで直接代入すれば1行で済みますね。
お好みで。

ラジオボタン

・基本的なやつ

<input type="radio" />

・複数
グループ化はnameを統一すればOKです。
各ラジオボタンの識別にはidを使用します。

<input type="radio" id="radio1" name="radioGroup" />
<input type="radio" id="radio2" name="radioGroup" />
<input type="radio" id="radio3" name="radioGroup" />

・チェック状態の取得
「チェック状態を表示」ボタン押下でラジオボタンのチェック状態を取得しアラートで表示させます。
document.getElementById()でHTMLタグのidを指定し、後ろに.checkedを付けるとチェック状態を取得出来ます。

function alertRadioChecked() {
	checked = document.getElementById("radio1").checked;
	alert(checked);
}

<input type="radio" id="radio1" />
<input type="button" value="チェック状態を表示" onClick="alertRadioChecked()" />

・グループでチェックされているものを取得
グループ化されているものを取得するには、document.getElementsByName()を使用します。
何気にElementsなのが注意。

function alertRadiosChecked() {
	radios = document.getElementsByName("radioGroup2");
	for(i = 0; i < radios.length; i++) {
		if(radios[i].checked) {
			alert(radios[i].id + " checked");
			return;
		}
	}
	alert("no checked");
}

<input type="radio" id="radio4" name="radioGroup2" />
<input type="radio" id="radio5" name="radioGroup2" />
<input type="radio" id="radio6" name="radioGroup2" />
<input type="button" value="チェック状態を表示" onClick="alertRadiosChecked()" />

・コントロールキー＋クリックでオフにする
ちなみにオフの状態でコントロール＋クリックをしてもオフのままです。

function offRadio() {
	var ctrlPress = window.event.ctrlKey;
	if(ctrlPress) {
		document.getElementById("ctrlOffRadio").checked = false;
	}
}

<input type="radio" id="ctrlOffRadio" onClick="offRadio()" />

・クリックでチェック状態を反転させる
1つ上と似ていますがオフではなく反転させるパターン。
動きとしてはチェックボックスと同じ様な感じになります。

var radioValue;

function changeRadio($this) {
	if(radioValue) {
		$this.checked = false;
		radioValue = false;
	} else {
		radioValue = true;
	}
}

<input type="radio" onClick="changeRadio(this)" />

チェックボックス

・基本的なやつ

<input type="checkbox" />

・複数
ラジオボタンと同じでnameは統一、idは個別。

<input type="checkbox" id="checkbox1" name="checkboxGroup" />
<input type="checkbox" id="checkbox2" name="checkboxGroup" />
<input type="checkbox" id="checkbox3" name="checkboxGroup" />

・チェック状態を取得
「チェック状態を表示」ボタン押下でチェックボックスのチェック状態を取得しアラートで表示させます。
document.getElementById()でHTMLタグのidを指定し、後ろに.checkedを付けるとチェック状態を取得出来ます。

function alertCheckboxChecked() {
	checked = document.getElementById("checkBox").checked;
	alert(checked);
}

<input type="checkbox" id="checkBox" />
<input type="button" value="チェック状態を表示" onClick="alertCheckboxChecked()" />

・グループでチェックされているものを取得
チェックされていない場合のロジックとか書いて長いファンクションになりましたが、ラジオボタンと同じでdocument.getElementsByName()でグループを取得。
そしてfor文で回してチェック状態を判定します。

function alertCheckboxesChecked() {
	checkboxes = document.getElementsByName("checkboxGroup2");
	checkedId = "";
	for(i = 0; i < checkboxes.length; i++) {
		if(checkboxes[i].checked) {
			if(checkedId != "") {
				checkedId = checkedId + ", ";
			}
			checkedId = checkedId + checkboxes[i].id;
		}
	}
	if(checkedId != "") {
		alert(checkedId + " checked");
	} else {
		alert("no checked");
	}
}

<input type="checkbox" id="checkbox4" name="checkboxGroup2" />
<input type="checkbox" id="checkbox5" name="checkboxGroup2" />
<input type="checkbox" id="checkbox6" name="checkboxGroup2" />
<input type="button" value="チェック状態を表示" onClick="alertCheckboxesChecked()" />

随時更新します。