入力type = textを無効にする方法は？

text可能であれば、JavaScriptを使用したタイプの入力フィールドへの書き込みを無効にします。入力フィールドはデータベースから入力されます。そのため、ユーザーに値を変更させたくありません。

ページがレンダリングされるときにこれがわかっている場合は、データベースに値があるため、JavaScriptの代わりにレンダリング時に無効にすることをお勧めします。これを行うには、次のようにreadonly属性を（またはdisabled、フォーム送信からも削除する場合は）に追加します<input>。

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

document.getElementById('foo').disabled = true;

または

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

readOnlyFirefox（マジック）で正しく動作するには、キャメルケースにある必要があります。

デモ：https://jsfiddle.net/L96svw3c/は -多少の違いを説明disabledしてをreadOnly。

データがデータベースから読み込まれる場合は、タグを使用して表示しないことを検討し<input>てください。それでも、タグで直接無効にできます：

<input type='text' value='${magic.database.value}' disabled>

後でJavaScriptで無効にする必要がある場合は、「無効」属性を設定できます。

document.getElementById('theInput').disabled = true;

値をそのまま表示しないことをお勧めする理由<input>は、私の経験では、レイアウトの問題が発生するためです。テキストが長い場合、<input>ユーザーはテキストをスクロールしてみる必要がありますが、これは通常の人が考えていることではありません。<span>何かにドロップするだけで、スタイリングの柔軟性が高まります。

jqueryでもできます：

$('#foo')[0].disabled = true;

作業例：

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

入力ボックスへの参照を取得し（例：）document.getElementById('mytextbox')、そのreadonlyプロパティをtrue次のように設定します。

myInputBox.readonly = true;

または、このプロパティをインラインで追加することもできます（JavaScriptは必要ありません）。

<input type="text" value="from db" readonly="readonly" />