テキストボックスの操作JavaScript入門

テキストボックスを操作するコード

まずはテキストボックスに入力された文字を取得したり、書き換えたりします。 HTMLのbody内に以下のように記入してみて下さい。

<form name="js">
お名前：<input type="text" name="txtb" value=""><br>
<input type="button" value="歓迎１" onclick="tbox1()"><br>
<input type="button" value="消去" onclick="clr()"><br>
</form>

<script>

//テキストボックスの文字を取得する
function tbox1(){

  var str1=document.js.txtb.value;
  alert("ようこそ"+str1+"さん！");

}


//テキストボックスの文字を操作する
function clr(){

  document.js.txtb.value="";

}

</script>

既に何回か出てきましたが、 JavaScriptでフォームを扱う時はformタグ， inputタグにname属性を付けます。 ここでは「js」と「txtb」という名称を付けました。

次にJavaScript部分を見ていきます。 関数tbox1()で、 変数str1を宣言し、 テキストボックスの文字列を取得して代入しています。 テキストボックスの文字列は以下の方法で取得できます。

document.form名.input名.value

テキストボックスに表示されている文字列を取得します

テキストエリア<textarea></textarea>の文字列も取得できます

最後にalertで取得した文字を加工し、出力するようにしています。

２つめの関数clr()は、テキストボックスの文字を書き換えする関数です。 document.form.input.valueを左辺に持ってくれば、 テキストボックスのvalue値に右辺の文字列を代入することができます。 空の文字列を代入することで、テキストボックス内の文字列をクリアできます。

elements[]を利用したフォーム操作

JavaScriptでフォームを操作する時には、 inputタグのname属性値を使う以外にelements[]を使う方法もあります。 elements[]を使うと、 フォームに設置された各ボックスやボタンを上から順番に取得することができます。 上記のフォームでは、1番目がテキストボックス、2,3番目がボタンとなります。

上記コードの続きに、以下のように書き足して試してみて下さい。

<script>

//elements[]を使って取得する
function tbox2(){

  var str2=document.js.elements[0].value;
  alert(str2+"さん、いらっしゃい！");

}

</script>

<form>
<input type="button" value="歓迎２" onclick="tbox2()"><br>
</form>

elements[]は配列になっているので、 最初のテキストボックスを取得する場合はelements[0]となります。 配列なので、for文を使って繰り返し操作する時などに便利です。

次のページでは、チェックボックスについて解説します。