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

HTML DOM Input URL sizeプロパティの使い方をわかりやすく解説

Input URL sizeプロパティとは

HTML DOMのInput URL sizeプロパティは、type="url"の入力フィールドに表示される文字数（フィールドの幅）を制御するsize属性を取得・設定するためのプロパティです。size属性が明示的に定義されていない場合、このプロパティは既定値である「20」を返します。

構文

基本的な構文は以下の通りです。

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

inputURLObject.size

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

inputURLObject.size = number

使用例

それでは、Input URL sizeプロパティを使った具体的なサンプルを見てみましょう。以下の例では、ボタンをクリックするとURL入力フィールドの表示幅が拡大され、現在のsize値が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-size</legend>
<label for="URLSelect">URL:
<input type="url" id="URLSelect" 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 inputURL = document.getElementById("URLSelect");
    function increaseVisibility() {
        inputURL.size = 30;
        divDisplay.textContent = 'Visibility Increased to '+inputURL.size;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。

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

HTML DOM Input URL sizeプロパティの使い方をわかりやすく解説

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

HTML DOM Input URL sizeプロパティの使い方をわかりやすく解説

ボタンをクリックすると、sizeプロパティの値が「10」から「30」に変更され、URL入力フィールドの幅が広がっていることが確認できます。

まとめ

  • sizeプロパティを使うと、URL入力フィールドの表示幅（文字数）を取得・設定できます。
  • size属性が未指定の場合は、既定値の「20」が返されます。
  • JavaScriptから動的に値を変更することで、ユーザー操作に応じた柔軟なUI調整が可能になります。
  1. HTML DOM パスワード入力フィールドの size プロパティの使い方を解説

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

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

    HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。 構文 URL プロパティの値を取得する基本的な構文は以下の通りです。 document.URL このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。 HTML DOM URL プロパティの使用例 ここでは、ボ