（２） input 要素のプロパティ
○ type=text、number、search、tel、url、email、date、time などのプロパティ
type が text や number などである input 要素に適用される主なプロパティには次のようなものがあります。
| プロパティ | 値 |
|---|
| autocomplete | autocomplete 属性 |
| defaultValue | 元々の value 値（初期文字列） |
| max | max 属性値 |
| maxLength | maxLength 属性値 |
| min | min 属性値 |
| minLength | minLength 属性値 |
| pattern | pattern 属性値 |
| placeholder | placeholder 属性値 |
| readOnly | readOnly 属性値 |
| size | size 属性値 |
| step | step 属性値 |
記述例
<form name="f1" action="#">
<input type="text" name="e1" minlength="3" maxlength="5" autocomplete="on" size="6" value="初期値">
<input type="tel" name="e2" pattern="^[0-9]{9,11}$" required="true" placeholder="0311112222">
<input type="number" name="e3" min="0" max="100" step="1">
</form>
<div id="d1"></div>
<script>
let f = document.forms[0];
document.getElementById("d1").textContent=f.e1.minLength;
document.getElementById("d2").textContent=f.e1.maxLength;
document.getElementById("d3").textContent=f.e1.autocomplete;
document.getElementById("d4").textContent=f.e1.size;
document.getElementById("d5").textContent=f.e1.defaultValue;
document.getElementById("d6").textContent=f.e2.pattern;
document.getElementById("d7").textContent=f.e2.required;
document.getElementById("d8").textContent=f.e2.placeholder;
document.getElementById("d9").textContent=f.e3.min;
document.getElementById("d10").textContent=f.e3.max;
document.getElementById("d11").textContent=f.e3.step;
</script>
実行例
実行時に設定されるプロパティには次のものがあります。
| プロパティ | 値 |
|---|
| selectionStart | 選択範囲の開始位置（０～） |
| selectionEnd | 選択範囲の終了位置の次の位置（selectionStart <= selectionEnd） |
| selectionDirection | 選択方向
| 値 | 意味 |
|---|
| forward | 先頭から末尾の方向 |
| backward | 末尾から先頭の方向 |
| none | 不明 |
|
記述例
<form>
<input type="text" name="e1" readonly="true" size="30" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ">
</form>
<div id="d1"></div>
<script>
function set() {
document.getElementById("d1").textContent=f.e1.selectionStart;
document.getElementById("d2").textContent=f.e1.selectionEnd;
document.getElementById("d3").textContent=f.e1.selectionDirection;
document.getElementById("d4").textContent=f.e1.value;
document.getElementById("d5").textContent=f.e1.defaultValue;
}
let f = document.forms[0];
f.e1.addEventListener("select", set);
f.e1.addEventListener("input", set);
</script>
文字列を選択してみてください。選択方向によって、selectionDirection 値が変わります。
また、value 値も表示しています。文字列を変更することによって、value 値が変わります。元々の値は defaultValue 値にあります。
実行例
type が checkbox や radio などである input 要素に適用される主なプロパティには次のようなものがあります。
| プロパティ | 値 |
|---|
| checked | checked 属性 |
| defaultChecked | 操作する前の、元々の checked 属性値 |
記述例
<form name="f1" action="#">
<input type="checkbox" name="e1" value="1" onclick="checkChecked(cb, 'd12')">選択１
<input type="checkbox" name="e1" value="2" onclick="checkChecked(cb, 'd12')" checked>選択２
<input type="checkbox" name="e1" value="3" onclick="checkChecked(cb, 'd12')">選択３
<span id="d11" style="background-color:yellow;"></span> <span id="d12"></span><br>
<input type="radio" name="e2" value="1" onclick="checkChecked(rb, 'd22')">選択１
<input type="radio" name="e2" value="2" onclick="checkChecked(rb, 'd22')" checked>選択２
<input type="radio" name="e2" value="3" onclick="checkChecked(rb, 'd22')">選択３
<span id="d21" style="background-color:yellow;"></span> <span id="d22"></span>
</form>
<script>
var cb = document.f1.e1;
var rb = document.f1.e2;
function checkChecked(c, id) {
let s = "";
for (var i = 0 ; i < c.length ; i++) {
if (c[i].checked == true)
s += c[i].value + " ";
}
document.getElementById(id).textContent = s;
}
function checkDefaultChecked(c, id) {
let s = "";
for (var i = 0 ; i < c.length ; i++) {
if (c[i].defaultChecked == true) {
s += c[i].value + " ";
}
document.getElementById(id).textContent = s;
}
cb[2].checked = true;
checkDefaultChecked(cb, "d11");
checkChecked(cb, "d12");
checkDefaultChecked(rb, "d21");
checkChecked(rb, "d22");
</script>
チェックボックスやラジオボタンにチェックを付けると、チェックのついた要素の value がその右側に表示されます。
背景が黄色い部分は 初期値として checked が付けられている要素です。なお、チェックボックスの「選択３」は、実行時にチェックを付けるため、背景が黄色い "3" は表示されません。
実行例
type が file である input 要素に適用される主なプロパティには次のようなものがあります。
| プロパティ | 値 |
|---|
| accept | accept 属性 |
| multiple | multiple 属性 |
| files | 選択されたファイルのリスト |
multiple が指定されているので、複数ファイルを選択することができます。
<form name="f1">
<input type="file" name="e1" accept="image/png,image/gif" multiple>
<input type="button" value="送信" onclick="document.getElementById("d3").textContent=dispList(f.e1.files);">
</form>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script>
function dispList(list) {
let s = "";
for (let i = 0 ; i < list.length ; i++) {
s += list[i].name + " ";
}
return s;
}
let f = document.forms[0];
document.getElementById("d1").textContent=f.e1.accept;
document.getElementById("d2").textContent=f.e1.files;
</script>
files は選択されたファイルのリストなので、ファイル選択後［送信］ボタンをクリックした後に表示されます。
実行例
type が image 要素に適用される主なプロパティには次のようなものがあります。
| プロパティ | 値 |
|---|
| alt | alt 属性 |
| height | height 属性 |
| src | src 属性 |
| width | width 属性 |
記述例
<form>
<input type="image" name="e1" src="bear3.png" alt="くま">
</form>
<div id="d1"></div>
<script>
let f = document.forms[0].children["e1"];
document.getElementById("d1").textContent=e1.src;
document.getElementById("d2").textContent=e1.alt;
document.getElementById("d3").textContent=e1.height;
document.getElementById("d4").textContent=e1.width;
</script>
src 属性で記述したファイルがボタンのイメージになります。
表示例
エレメント.select()
入力フィールド内の文字列を選択状態にする。
戻り値：なし
記述例
<form name="f1" action="#">
<input type="text" name="e1" value="初期値"> <input type="text" name="e2" placeholder="入力ヒント">
<div onClick="document.f1.e1.select();">選択状態にする</div> <div onClick="document.f1.e2.select();">選択状態にする</div>
</form>
[選択状態にする]ボタンをクリックすると入力されている文字列が選択状態になります。右側は placeholder なので選択されず、未入力状態になります。
実行例
エレメント.setSelectionRange(開始, 終了[, 選択方向])
入力フィールド内の文字列を選択状態にする。
引数 開始：選択する最初の文字の位置（０～終了）
引数 終了：選択する最後の文字の次の位置（開始～）
引数 選択方向：選択が行われたと見なされる方向（有効かどうか不明）
| 主な特性 | 機能 |
|---|
| forward | 開始から終了方向 |
| backward | 終了から開始方向 |
| none | 選択方向が不明（規定値） |
戻り値：なし
記述例
<form>
<input type="text" name="e1" size="40" value="郵便局は、post office といいます。"><br>
範囲：<input type="number" name="s" min="0" max="23" size="2" value="12"> ～ <input type="number" name="e" min="0" max="23" size="2" value="20"><br>
選択方向：<select name="d"><br><br>
<option value="forward" label="forward（開始から終了方向）"></option>
<option value="backward" label="backward（終了から開始方向）"></option>
<option value="none" selected label="none（選択方向が不明）"></option>
</select><br><br>
<div onClick="selectText();">選択</div>
</form>
<script>
function selectText() {
let f = document.forms[0];
let s = f.s.value;
let e = f.e.value;
let d = f.d.value;
f.e1.focus();
f.e1.setSelectionRange(s, +e+1, d);
}
</script>
下の例の Office という文字列は ffi の部分が合字されて表示されています。しかし、setSelectionRange はそれらを f f i の3文字と正しく判断しているようです。（合字については、E::first-letter や font-variant-ligatures も参照してください。）
また、選択方向が有効かどうかはよくわかりません。
実行例
エレメント.setRangeText(挿入文字列[, 開始, 終了[, 選択モード]])
入力フィールド内の指定された範囲を挿入文字列で置換する。
引数 挿入文字列：挿入する文字列
引数 開始：置換する最初の文字の位置（０～）（規定値：選択されている範囲の開始位置）
引数 終了：置換する最後の文字の次の位置（０～）（規定値：選択されている範囲の終了位置）
引数 選択モード：置換後の選択範囲
| 主な特性 | 機能 |
|---|
| select | 新規挿入した文字列を選択 |
| start | 挿入した文字列の直前を選択 |
| end | 挿入した文字列の直後を選択 |
| preserve | 選択範囲を保全（規定値） |
戻り値：なし
記述例
<form>
<input type="text" name="e1" size="40" value="郵便局は、post office といいます。"><br>
範囲：<input type="number" name="s" min="0" max="23" size="2" value="12"> ～ <input type="number" name="e" min="0" max="23" size="2" value="20"><br>
挿入文字列：<input type="text" name="r" size="11" maxlength="10"><br>
選択モード：<select name="m"><br><br>
<option value="select" label="select（挿入文字列を選択）"></option>
<option value="start" label="start（挿入文字列の直前を選択）"></option>
<option value="end" label="end（挿入文字列の直後を選択）"></option>
<option value="preserve" selected label="preserve（選択範囲を保全）"></option>
</select><br><br>
<div onClick="replaceText();">置換</div>
</form>
<script>
function replaceText() {
let f = document.forms[0];
let s = f.s.value;
let e = f.e.value;
let r = f.r.value;
let m = f.m.value;
f.e1.focus();
f.e1.setRangeText(r, s, +e+1, m, );
}
</script>
入力されている文字列のどこかを選択した後に、置換してみてください。
選択モードが select のときは、挿入文字列が選択され、preserve のときは、置換前の選択領域が維持されます。
