JavaScript テキストボックスの値を取得/設定する

目次

テキストボックスとは

実際のテキストボックス(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" />

関連の記事

JavaScript hiddenの値を取得/設定する
JavaScript テキストエリアの値を取得/設定する