このページについて
このページではHTMLで使う事ができるreadonlyの機能と使い方を解説しています。
readonly属性
readonlyはその名の通り、読み取り専用にする機能を持っています。これはinputタグ/textareaタグの2つで使う事ができます。
このreadonlyはブール値と言って、「書いたら有効、書かなかったら無効」という性質を持っています。なおJavaScriptを使って後からreadonlyを削除し、入力可能にすることもできます。
readonly属性の書き方
readonlyはinputタグがtextareaタグに書くだけでOKです。
<input type="text" readonly placeholder="読み取り専用エリアです">これを実際にブラウザで表示すると
このようになります。何かを入力しようとしても受け付けてもらえない入力エリアができます。
readonlyとdisabledの違い
inputタグにはdisabled属性という、入力フォームそのものを無効化する属性があります。あちらとの違いをいくつか紹介すると
- disabledはautofocus属性でフォーカス不可だけどreadonlyはフォーカス可能
- フォームで送信する際にdisabledのままだと送信自体が行われないが、readonlyは送信される
disabled属性もJavaScriptで無効化する事ができるので、その点ではどちらも同じと言えますが解除する前の違いは上記2点です。
readonlyを解除する方法
readonlyを後から動的に解除する場合、JavaScriptで操作を行います。
<textarea name="text1" id="textarea1" readonly></textarea>これに対してreadonlyを解除するには
document.getElementById('textarea1').readOnly = false;で解除できます。HTMLではreadonyと全て小文字でしたが、JavaScriptではプロパティ名のルールに従っているのか、readOnlyとOだけが大文字になっているので注意しましょう。
最終的には「どこかしらの条件を確認し、そこがtrueならreadonlyを無効化する」というケースが多いと思うのでサンプルを書いておくと
<form name="form1" id="test">
<label>解除</label>
<input type="radio" name="readChange" onclick="unlock()">
<label>ロック</label>
<input type="radio" name="readChange" onclick="lock()"><br>
<label>以下がreadonly</label><br>
<textarea id="read" placeholder="ここは読み取り専用エリアです。" readonly></textarea>
</form>
<script>
function unlock() {
document.getElementById('read').readOnly = false;
}
function lock() {
document.getElementById('read').readOnly = true;
}
</script>わかりやすさ重視で書くとこのようになります。まず上のformタグはそのまま見たままですね。解除とロックのラジオボタンがあり、どちらか1つを選択できます。その下にはreadonlyでロックされたtextareaがあります。
そのしたのscriptの部分は2つの関数を用意しました。1つはロックを解除するための関数unlock()と、もう1つは再度ロックをするためのlock()関数です。違う点はfalse(無効化)とtrue(有効化)ぐらいですね。
実際にブラウザで実行すると以下のようになります。
まとめ
readonlyはinputタグとtextareaタグで使う事ができる属性です。ユーザーからの書き込みや操作を無効化する機能を持っています。
解除するにはjavaScriptでreadOnlyをfalseやtrueで変更する事で行えます。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。