HTMLのinput readonly属性とは?使い方とサンプルコードを解説
HTMLのinput要素に設定できるreadonly属性は、入力フィールドの値をユーザーが編集できないようにするための属性です。readonlyを指定した入力欄は変更できませんが、値を選択してコピーすることは可能です。フォームで既定値を表示したい場合や、ユーザーに内容を確認させつつ修正はさせたくない場合に便利です。
以下に、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>このコードを実行すると、以下のような動作になります。
1) 「Copy Email Id」ボタンをクリックする前
メールアドレスが入力された状態で表示され、画面には「このメールは読み取り専用です」というメッセージが表示されます。
2) 「Contact Us」のメール入力欄をクリックした場合
readonly属性が設定されているため、メールアドレスを編集しようとしても変更できず、「編集できません」というメッセージが表示されます。
3) 「Copy Email Id」ボタンをクリックした場合
JavaScriptのselect()メソッドとexecCommand('copy')によって、メールアドレスがクリップボードにコピーされ、コピーされた内容が画面に表示されます。readonly属性が付いていてもコピーは可能であることが分かります。
readonly属性のポイント
・readonly属性を指定すると、ユーザーは入力欄の値を編集できなくなりますが、選択やコピーは自由に行えます。
・disabled属性と似ていますが、disabledの場合は値の選択やコピー、フォーム送信時のデータ送信も行われません。readonlyであればフォーム送信時に値がサーバーへ送信される点が異なります。
・JavaScriptからは値の変更が可能なため、動的に値を更新したい読み取り専用フィールドにも利用できます。
-
HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法
HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&
-
HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説
maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属