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

  1. HOME
  2. JavaScript入門
  3. テキストボックスの操作

ここから、フォームの情報をJavaScriptで取得したり、 操作したりする方法について解説します。まずはテキストボックスの操作を考えます。

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

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

<form name="js">
お名前:<input type="text" name="txtb" value=""><br>
<input type="button" value="歓迎1" 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で取得した文字を加工し、出力するようにしています。

2つめの関数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="歓迎2" onclick="tbox2()"><br>
</form>

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

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

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers