ywork2020.com

Title

読み取り専用属性の値を操作する

目次 (INDEX)

readOnlyとは

ここで説明するreadOnly とは次の語句からなるjavascriptのプロパティです。
read
読み: リード
意味: 読む
only
読み: オンリー
意味: 唯一の、たった一人の、~だけ(読むだけ)

目次に戻る

readOnlyの概要

このプロパティは要素の readonly 属性の値を取得、または設定することができます。

readonly 属性は input type=text 要素や textarea 要素などの入力可能な要素を読み取り専用に設定するための属性です。

この属性はブラウザ上では読み取り専用になるのでユーザーは書込みできなくなりますが、プログラムからの値の変更は可能です。

readOnlyプロパティはboolean型ですのでtrueかfalseで指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var readonly = Element.readOnly;
Element.readOnly = true;
Element.readOnly = false;

目次に戻る

サンプルコードと実行結果

ここではチェックボックスのチェックの有無により、テキストエリアが読み取り専用となるかを切り替えるプログラムを用意しました。

サンプルコード: CSS
<style>
	textarea:read-only{
		background-color: ##powderblue;
	}
</style>
サンプルコード: HTML
<body>
	<p>
		<input type="checkbox" id="idCheckBox" checked>
		<label for="idCheckBox">: チェックを外すとテキストエリアは読み取り専用になります。</label>
	</p>
	<textarea id="idTextArea" cols="20" rows="5">テキストエリア</textarea>
</body>
サンプルコード: script
<script>
	const elmCheckBox = document.getElementById("idCheckBox");
	const elmTextArea = document.getElementById("idTextArea");
	function funChecked(){
		if(elmCheckBox.checked == true){
			elmTextArea.readOnly = false;
		}
		else{
			elmTextArea.readOnly = true;
		}
	}
	elmCheckBox.addEventListener("change", funChecked);
	document.addEventListener("DOMContentLoaded", funChecked);
</script>
  • 02: 定数 = 要素の参照 (elmCheckBox = idCheckBox)
  • 03: 定数 = 要素の参照 (elmTextArea = idTextArea)
  • 04: 関数の作成 (funChecked()という名前の関数です。)
  • 05-10: 関数の処理 (チェックボックスのcheckedプロパティの判定によってテキストエリアのreadOnlyプロパティを操作します。)
  • 12: イベント登録 (チェックボックスのチェンジイベントに04:の関数を登録しています。)
  • 13: イベント登録 (DOM構築完了時イベントに04:の関数を登録しています。)
実行結果:

目次に戻る