[JavaScript] テキストボックスを読み取り専用にする

投稿日：2016年10月8日更新日：2018年5月3日

テキストボックスを読み取り専用にするには、readOnlyプロパティを設定します。

サンプル

例）ボタンを押すたびにテキストボックスのreadOnlyを切り替える

function changeReadOnly(){
  var obj = document.getElementById("txt1");
  if(obj.readOnly == true){
    obj.readOnly = false;  //readonlyを解除
  }else{
    obj.readOnly = true;   //readonlyに設定
  }
}

function changeReadOnly(){

var obj = document.getElementById("txt1");

if(obj.readOnly == true){

obj.readOnly = false; //readonlyを解除

}else{

obj.readOnly = true; //readonlyに設定

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" value="hoge" id="txt1" />
  <input type="button" value=" ボタン " onclick="changeReadOnly();" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、テキストボックスのreadOnlyが切り替わります。

　
※見た目は変わりませんが、readOnly=true中ではフォーカスを当てられません。

解説

readOnlyは、テキストボックスやテキストエリアなどテキスト系のみ使用できます。
readOnlyを設定するには、オブジェクトの.readOnlyにtrue/falseを設定します。
readOnlyのOは大文字でなければなりません。　例）readonlyは×。
disabled=trueと異なり、readOnly=trueの要素はsubmitされます。
disabled=trueでは文字選択不可ですが、readOnly=trueでは文字の選択が可能です。
disableを使う方法は以下をご覧ください。
→「フォーム部品のDisable/Enableを切り替える」

執筆者：とら