HTML DOM Input Email の readOnly プロパティとは？使い方とサンプルコードを解説
HTML DOM の Input Email readOnly プロパティは、メールアドレス入力フィールド（<input type="email">）がユーザーによって編集可能かどうかを設定・取得するためのプロパティです。このプロパティを使うことで、JavaScript から動的に読み取り専用状態を制御できます。
構文
readOnly プロパティの基本的な構文は以下の通りです。
値を取得する場合（boolean 値を返却）
inputEmailObject.readOnly
値を設定する場合
inputEmailObject.readOnly = booleanValue
指定できるブール値
booleanValue には、以下のいずれかの値を指定します。
| booleanValue | 説明 |
|---|---|
| true | メール入力フィールドが読み取り専用（readOnly）であることを示します。ユーザーは内容を編集できません。 |
| false | メール入力フィールドが読み取り専用ではないことを示します。ユーザーは自由に編集できます。 |
サンプルコード
ここでは、Input Email readOnly プロパティの具体的な使用例を見ていきましょう。以下の例では、読み取り専用に設定されたメールフィールドに対して、ボタンクリックでメールアドレスをコピーする機能を実装しています。
<!DOCTYPE html>
<html>
<head>
<title>Input Email 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>Email-readOnly</legend>
<label for="EmailSelect">Contact Us :
<input type="email" id="EmailSelect" onclick="showErrorMsg()" value="infoHelpDesk@MNC.com" readOnly>
</label>
<input type="button" onclick="showMessage()" value="Copy Email Id">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Above email is read-only';
function showMessage() {
inputEmail.select();
document.execCommand('copy');
divDisplay.textContent = 'Email Copied: '+inputEmail.value;
}
function showErrorMsg(){
divDisplay.textContent +=', This cannot be edited.'
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような動作になります。
「Copy Email Id」ボタンをクリックする前の画面：
「Contact Us」のメールフィールドをクリックした場合：readOnly が設定されているため、編集できない旨のメッセージが表示されます。
「Copy Email Id」ボタンをクリックした場合：メールアドレスが選択・コピーされ、その旨が表示されます。
まとめ
readOnly プロパティを活用すれば、表示はするもののユーザーには変更させたくないメールアドレスなどの情報を、簡単に読み取り専用として扱うことができます。フォームの初期状態で readOnly 属性を付与する方法と、JavaScript から inputEmailObject.readOnly = true / false で動的に切り替える方法の両方を覚えておくと便利です。
-
HTML DOM Input WeekのreadOnlyプロパティとは？設定・取得方法を解説
HTML DOMのInput Week readOnlyプロパティは、週（week）入力フィールドがユーザーによって変更可能かどうかを設定・取得するためのプロパティです。このプロパティを活用することで、JavaScriptから動的にフィールドを読み取り専用状態にしたり、現在の状態を確認したりすることができます。構文readOnlyプロパティの構文は以下のとおりです。値を取得する場合（真偽値 true/false を返す）inputWeekObject.readOnly値を設定する場合inputWeekObject.readOnly = booleanValuebooleanValueに指定でき
-
HTML DOM Input SearchのreadOnlyプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Searchオブジェクトが持つreadOnly（リードオンリー）プロパティは、検索入力フィールドを読み取り専用にするかどうかを設定、または現在の状態を取得するために使用されるプロパティです。readOnlyプロパティを有効にすると、その要素はユーザーが編集できなくなります。ただし、読み取り専用の要素であっても、Tabキーやマウスクリックによるフォーカス移動は可能です。また、読み取り専用の要素にデフォルト値が入力されている場合、フォーム送信時にその値はサーバーへ送信されます。この点は、要素が無効化され値も送信されなくなるdisabled属性との大きな違いです。構文r