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

HTML DOM Input URL readOnlyプロパティの使い方を徹底解説

HTML DOMのInput URL readOnlyプロパティは、URL入力フィールド（<input type="url">）がユーザーによって編集可能かどうかを設定・取得するためのプロパティです。このプロパティを活用することで、フォーム内のURLフィールドを読み取り専用にし、意図しない変更からデータを保護できます。

構文

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

値を取得する場合（boolean型でtrue/falseを返す）

inputURLObject.readOnly

値を設定する場合

inputURLObject.readOnly = booleanValue

設定できる真偽値

「booleanValue」には、以下のいずれかの値を指定します。

booleanValue説明
trueURL入力フィールドが読み取り専用（readOnly）であることを示します。
falseURL入力フィールドが読み取り専用ではなく、編集可能であることを示します。

サンプルコード

それでは、Input URL readOnlyプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input URL readOnly</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-readOnly</legend>
<label for="URLSelect">お問い合わせ：
<input type="url" id="URLSelect" onclick="showErrorMsg()" value="https://www.google.com" readOnly>
</label>
<input type="button" onclick="showMessage()" value="URLをコピー">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = '上記のURLは読み取り専用です';
    function showMessage() {
        inputURL.select();
        document.execCommand('copy');
        divDisplay.textContent = 'コピーされたURL： '+inputURL.value;
    }
    function showErrorMsg(){
        divDisplay.textContent += '、このフィールドは編集できません。'
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような動作になります。

「URLをコピー」ボタンをクリックする前：

HTML DOM Input URL readOnlyプロパティの使い方を徹底解説

「お問い合わせ」のURLフィールドをクリックした場合：

HTML DOM Input URL readOnlyプロパティの使い方を徹底解説

「URLをコピー」ボタンをクリックした後：

HTML DOM Input URL readOnlyプロパティの使い方を徹底解説

まとめ

readOnlyプロパティを使用すると、JavaScriptから動的にURL入力フィールドの編集可否を制御できます。HTML属性としてreadOnlyを指定する方法に加え、スクリプトでtrue/falseを切り替えることで、状況に応じた柔軟なフォーム設計が可能になります。なお、readOnlyはユーザーの入力のみを制限するものであり、値自体はフォーム送信時にサーバーへ送られる点に注意してください。

  1. HTML DOM 入力テキストの readOnly プロパティの使い方を徹底解説

    HTML DOM の readOnly プロパティは、テキスト入力フィールド（input type=text）が読み取り専用かどうかを設定・取得するために使用されるプロパティです。 readOnly を true に設定すると、その要素はユーザーによって編集できなくなります。ただし、読み取り専用の要素であっても、Tab キーやクリックによるフォーカスは可能です。また、readonly 属性が設定された要素に初期値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。これは disabled 属性との大きな違いであり、disabled では値が送信されない点に注意が必要です。 構

  2. HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

    HTML DOMのInput Password readOnlyプロパティは、パスワード入力フィールドが読み取り専用かどうかを設定または取得するために使用されます。readOnlyプロパティを設定すると、要素は編集不可能になりますが、Tabキーやクリックによってフォーカスを得ることは可能です。また、読み取り専用の要素にデフォルト値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。 構文 readOnlyプロパティを設定する構文は以下の通りです。 passwordObject.readOnly = true|false ここで、trueはパスワードフィールドが読み取り専用で