HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Text の value プロパティの使い方とサンプルコード

HTML DOM の Input Text value プロパティは、テキスト入力フィールド（<input type="text">）の value 属性に設定されている値を文字列として取得するためのプロパティです。また、このプロパティに新しい文字列を代入することで、JavaScript からテキストフィールドの値を動的に変更することもできます。

構文

Input Text value プロパティの基本的な構文は以下の通りです。

値の取得（文字列を返す）

inputTextObject.value

値の設定（value 属性に文字列を代入）

inputTextObject.value = '文字列'

使用例

それでは、Input Text value プロパティを使った具体的なサンプルを見てみましょう。このサンプルでは、ボタンをクリックするとテキストフィールドにユーザー名が自動入力され、「Login」ボタンを押すとその値を読み取って画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Input Text value</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Text-value</legend>
<label for="TextSelect">Full Name:
<input type="Text" id="TextSelect">
<input type="button" onclick="getUserText('david')" value="David">
<input type="button" onclick="getUserText('shasha')" value="Shasha"><br>
<input type="button" onclick="login()" value="Login">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputText = document.getElementById("TextSelect");
    function getUserText(userName) {
        if(userName === 'david')
            inputText.value = 'David Miller';
        else
            inputText.value = 'Shasha Green';
    }
    function login() {
        if(inputText.value !== '')
            divDisplay.textContent = 'Welcome '+inputText.value.split("@")[0];
        else
            divDisplay.textContent = 'Enter Valid Text';
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、操作内容に応じて以下のように動作します。

1. 名前欄が空の状態で「Login」ボタンをクリックした場合

テキストフィールドが空のため、バリデーションエラーとして「Enter Valid Text」というメッセージが表示されます。

HTML DOM Input Text の value プロパティの使い方とサンプルコード

2. 「David」ボタンをクリックした後

getUserText() 関数によって、テキストフィールドに「David Miller」が自動的に入力されます。

HTML DOM Input Text の value プロパティの使い方とサンプルコード

3. 名前欄が入力済みの状態で「Login」ボタンをクリックした場合

login() 関数がテキストフィールドの値を取得し、入力がある場合は split("@")[0] によってユーザー名部分だけを取り出して「Welcome David Miller」のようなウェルカムメッセージを表示します。

HTML DOM Input Text の value プロパティの使い方とサンプルコード

まとめ

Input Text の value プロパティを使えば、テキストフィールドの現在の値を簡単に読み取り、また JavaScript から自由に書き換えることができます。フォームの自動入力や入力内容のチェックなど、ユーザーインターフェースを動的に制御したい場面で非常に役立つ基本プロパティです。

  1. HTML DOM Input Text autocomplete（オートコンプリート）プロパティの使い方

    HTML DOM の Input Text autocomplete プロパティは、type=text が指定された <input> 要素の autocomplete 属性と連動するプロパティです。この属性には「on」または「off」のいずれかの値を指定でき、「on」を設定すると Web ブラウザはユーザーの過去の入力履歴に基づいてテキストを自動補完します。一方、「off」を設定した場合は自動補完が行われません。 構文 autocomplete プロパティを設定する際の構文は以下のとおりです。 textObject.autocomplete = on|off 「on」を指定すると

  2. HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

    HTML DOM の input submit value プロパティは、type=submit を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。 送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。 構文 value プロパティを設定する場合の基本的な