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

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

HTML DOM の Input URL maxLength プロパティは、URL入力フィールド（<input type="url">）に入力できる最大文字数を取得・設定するためのプロパティです。このプロパティが定義されていない場合、戻り値は「-1」となります。

構文

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

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

inputURLObject.maxLength

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

inputURLObject.maxLength = number

使用例

ここでは、Input URL の maxLength プロパティを使った具体的なサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<head>
<title>Input URL maxLength</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 id="Google">
<fieldset>
<legend>URL-maxLength</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" maxLength="10">
</label>
<input type="button" onclick="logIN()" value="Log In">
<input type="button" onclick="changeMaxLength()" value="Change Maxlength">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = 'Maxlength: '+inputURL.maxLength;
    function changeMaxLength() {
        inputURL.maxLength += 10;
        divDisplay.textContent = 'Maxlength: '+inputURL.maxLength;
    }
    function logIN(){
        if(inputURL.value !== '')
            divDisplay.textContent = 'Could not identify url, Redirecting to '+inputURL.form.id;
    }
</script>
</body>
</html>

実行結果

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

「Change Maxlength」ボタンをクリックする前

初期状態では、HTMLで設定された maxLength の値「10」が画面に表示されます。

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

「Change Maxlength」ボタンをクリックした後

ボタンをクリックすると、changeMaxLength() 関数によって maxLength の値に10が加算され、「20」に更新されて表示されます。

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

「Log In」ボタンをクリックし、URLを入力した後

URLフィールドに値が入力された状態で「Log In」ボタンを押すと、フォームのID名とともにリダイレクト先のメッセージが表示されます。

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

まとめ

Input URL の maxLength プロパティを使用することで、JavaScriptから動的にURL入力欄の最大文字数を取得したり変更したりできます。ユーザーからの入力文字数を制限したい場面や、状況に応じて制限値を変更したい場合に活用できる便利なプロパティです。

  1. HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma

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

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