web-dev-qa-db-ja.com

JavaScriptで入力フィールドを読み取り専用にする方法

入力フィールドにreadonly="readonly"を追加して、編集できないようにすることができます。ただし、入力のIDをターゲットにJavaScriptを使用して、フォームコード（マーケティングソフトウェアを介して生成される）にアクセスできないため、読み取り専用にする必要があります。

送信時にデータを収集する必要があるため、入力を無効にしたくありません。

以下は、これまでのところ運のない提案で追加したページです。

https://www.pages05.net/engagedigital/inputReadOnly/test?spMailingID=6608614&spUserID=MTI5MDk4NjkzMTMS1&spJobID=Nzk4MTY3MDMS1&spReportId=Nzk4MTY3MDMS1

将来これを使用する場合は必ず<body onload="onLoadBody();">を使用してください。

javascriptinputreadonly
38
chris

入力要素を取得し、次のようにreadOnlyプロパティをtrueに設定できます。

document.getElementById('InputFieldID').readOnly = true;

具体的には、これはあなたが望むものです：

<script type="text/javascript">
  function onLoadBody() {
    document.getElementById('control_EMAIL').readOnly = true;
  } 
</script>

BodyタグでこのonLoadBody()関数を次のように呼び出します。

<body onload="onLoadBody">

デモを見る： jsfiddle 。

61
Vijay

上記の答えは私にはうまくいきませんでした。以下は：document.getElementById("input_field_id").setAttribute("readonly", true);

そして、読み取り専用属性を削除するには：document.getElementById("input_field_id").removeAttribute("readonly");

また、ページがロードされたときに実行する場合は、 here を参照する価値があります。

20
Charlie Haley
document.getElementById("").readOnly = true
4
gezzuzz
document.getElementById('TextBoxID').readOnly = true;    //to enable readonly


document.getElementById('TextBoxID').readOnly = false;   //to  disable readonly
4
Mumthezir VP

これを試して ：

document.getElementById(<element_ID>).readOnly=true;
2
Sandiip Patil