HTML DOM input monthのreadOnlyプロパティとは？取得・設定方法をサンプルコードで解説
readOnlyプロパティの概要
HTML DOMのinput month（月入力）要素におけるreadOnlyプロパティは、HTML文書内の月入力フィールドが読み取り専用（read-only）かどうかを取得および設定するために使用されます。このプロパティを活用することで、JavaScriptから動的にフィールドの編集可否を制御でき、ユーザーに入力の変更を許可するか、閲覧のみに制限するかを柔軟に切り替えることができます。
構文
readOnlyプロパティの基本的な構文は以下の通りです。
1. readOnlyの値を取得する場合
object.readOnly
2. readOnlyの値を設定する場合
object.readOnly = true | false
trueを設定するとフィールドは読み取り専用になりユーザーは値を変更できません。falseを設定すると、再び編集可能な状態に戻ります。
サンプルコード
HTML DOM input monthのreadOnlyプロパティの具体的な使用例を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM Input month readOnly プロパティ デモ</h1>
<p>あなたの生まれた月を選択してください</p>
<input type="month" class="monthInput">
<button onclick="rFunction()" class="btn">読み取り専用</button>
<button onclick="rWFunction()" class="btn">読み書き可能</button>
<script>
function rFunction() {
var monthInput = document.querySelector(".monthInput");
monthInput.readOnly =true;
}
function rWFunction(){
var monthInput = document.querySelector(".monthInput");
monthInput.readOnly =false;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
まず、月入力フィールドで任意の月を選択し、「読み取り専用」ボタンをクリックしてみてください。その後、選択を変更しようとしても、フィールドが読み取り専用になっているため変更できなくなります。
次に「読み書き可能」ボタンをクリックしてから選択を変更すると、フィールドが編集可能な状態に戻り、再び自由に月を選択できるようになります。
まとめ
readOnlyプロパティを使用すれば、JavaScriptから月入力フィールドの編集可否を簡単に切り替えることができます。フォームの入力制御や、確認画面などで入力済みの値を固定表示したい場合に非常に便利な機能ですので、ぜひ活用してみてください。
-
HTML DOM 入力テキストの readOnly プロパティの使い方を徹底解説
HTML DOM の readOnly プロパティは、テキスト入力フィールド（input type=text）が読み取り専用かどうかを設定・取得するために使用されるプロパティです。 readOnly を true に設定すると、その要素はユーザーによって編集できなくなります。ただし、読み取り専用の要素であっても、Tab キーやクリックによるフォーカスは可能です。また、readonly 属性が設定された要素に初期値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。これは disabled 属性との大きな違いであり、disabled では値が送信されない点に注意が必要です。 構
-
HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説
HTML DOMのInput Password readOnlyプロパティは、パスワード入力フィールドが読み取り専用かどうかを設定または取得するために使用されます。readOnlyプロパティを設定すると、要素は編集不可能になりますが、Tabキーやクリックによってフォーカスを得ることは可能です。また、読み取り専用の要素にデフォルト値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。 構文 readOnlyプロパティを設定する構文は以下の通りです。 passwordObject.readOnly = true|false ここで、trueはパスワードフィールドが読み取り専用で