web-dev-qa-db-ja.com

javascriptからHTMLテキストボックスにアクセスする方法は？

Javascript関数でHTMLテキストボックスにアクセスする方法は？

javascripthtmltextbox
7
Ahmad Farid

テキストボックスにIDプロパティを設定し、document.getElementById（）関数を使用します...以下の例：

<html>
<head>
<script type="text/javascript">

function doSomethingWithTextBox()
{
  var textBox = document.getElementById('TEXTBOX_ID');
  // do something with it ...

}

</script>
</head>

<body>

<input type="text" id="TEXTBOX_ID">

</body>
</html>
10
Rich

非常に簡単に、これを試してください：

<!doctype html>
<html>
    <head>
        …
    </head>
<body>
    <form>
        <input id="textbox" type="text" />
    </form>
    <script>
        var textboxValue = document.getElementById("textbox").value;
    </script>
</body>

変数textboxValueは、テキストボックスに入力したものと同じになります。

このように単純に記述されている場合は、テキストボックス（inputフィールド）がHTMLに表示された後にスクリプトを配置する必要があることを忘れないでください。そうしないと、スクリプトが検索しているため、ページが最初に読み込まれたときにエラーが発生します。 inputフィールドはまだブラウザによって作成されていません。

これがお役に立てば幸いです。

6
Jonathon Oates

テキストボックスにid属性を指定し、その後、document.getElementById('<textbox id>')でフェッチします。

5
jolt

まず、テキストボックスへのDOM（Document Object Model）参照を取得できる必要があります。

<input type="text" id="mytextbox" value="Hello World!" />

id属性に注意してください。テキストボックスのIDはmytextboxになりました。

次のステップは、JavaScriptで参照を取得することです。

var textbox = document.getElementById('mytextbox'); // assign the DOM element reference to the variable "textbox"

これにより、id属性によってHTML要素が取得されます。これらのIDは一意である必要があるため、同じIDを持つ2つのテキストボックスを持つことはできません。

最後のステップは、テキストボックスの値を取得することです。

alert(textbox.value); // alert the contents of the textbox to the user

valueプロパティには、テキストボックスの内容が含まれています。これで完了です。

詳細については、MDCでいくつかの情報を確認することをお勧めします。
GetElementByIDリファレンス
入力要素リファレンス
DOMの一般的な概要

5
Ivo Wetzel

document.getElementById（ 'textboxid'）。valueまたはdocument.formname.textboxname.value

4
Yishai Landau