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

【HTML DOM】Input Text の size プロパティの使い方｜取得・設定方法をサンプル付きで解説

HTML DOM の Input Text size プロパティは、テキスト入力フィールド（<input type="text">）の size 属性を取得または設定するために使用されます。size 属性は、テキストボックスに表示できるおおよその文字数（入力欄の幅）を指定するもので、このプロパティが明示的に定義されていない場合は、デフォルト値として「20」が返されます。

構文

size プロパティの基本的な構文は以下のとおりです。

size 属性の値を取得する場合

inputTextObject.size

size プロパティに数値を設定する場合

inputTextObject.size = number

サンプルコード

それでは、Input Text の size プロパティを使った具体的な例を見ていきましょう。下記のサンプルでは、ボタンをクリックするとテキスト入力欄の表示幅（size 値）が拡張され、その結果が画面に表示される仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<title>Input Text size</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-size</legend>
<label for="textSelect">Full Name:
<input type="text" id="textSelect" size="10">
</label><br>
<input type="button" onclick="increaseVisibility()" value="Increase Visibility">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputText = document.getElementById("textSelect");
    function increaseVisibility() {
        inputText.size = 30;
        divDisplay.textContent = 'Visibility Increased to '+inputText.size;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

「Increase Visibility」ボタンをクリックする前：

【HTML DOM】Input Text の size プロパティの使い方｜取得・設定方法をサンプル付きで解説

「Increase Visibility」ボタンをクリックした後：

【HTML DOM】Input Text の size プロパティの使い方｜取得・設定方法をサンプル付きで解説

ボタンをクリックすると JavaScript の increaseVisibility() 関数が呼び出され、inputText.size = 30; によって入力欄の幅が 10 から 30 へと拡張されます。同時に、変更後の size 値が div 要素内にテキストとして出力されていることが確認できます。

size プロパティを使う際のポイント

  • size プロパティには 0 以上の整数を指定します。
  • size 属性は「平均的な半角文字が何文字分表示できるか」という目安であり、CSS の width プロパティが指定されている場合はそちらが優先されます。
  • Chrome、Firefox、Safari、Edge など、主要なブラウザすべてでサポートされているため、互換性を気にせず利用できます。
  • 動的にフォームのレイアウトを調整したい場合や、ユーザーの操作に応じて入力欄の見やすさを向上させたい場合に便利です。
  1. HTML DOM パスワード入力フィールドの size プロパティの使い方を解説

    size プロパティとはHTML DOM の Input Password size プロパティは、パスワード入力フィールド（<input type=password>）の size 属性値を設定または取得するために使用されるプロパティです。このプロパティでは、文字数を単位としてパスワードフィールドの幅を定義できます。デフォルトの幅は 20 文字です。構文size プロパティを設定する場合の構文は以下のとおりです。passwordObject.size = numberここで number は、文字数で表したパスワードフィールドの幅を意味します。デフォルト値は 20 文字です。サン

  2. HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

    HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと