입력 유형 = 텍스트를 비활성화하는 방법은 무엇입니까?

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;

참고 readOnly낙타 표기법에 있어야 파이어 폭스 (마법)에서 제대로 작동합니다.

데모 : https://jsfiddle.net/L96svw3c/은 - 약간의 차이 설명 disabled과 readOnly.

데이터가 데이터베이스에서 채워지는 경우 태그를 사용하여 표시 하지 않는<input> 것이 좋습니다. 그럼에도 불구하고 태그에서 바로 비활성화 할 수 있습니다.

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

나중에 Javascript로 비활성화해야하는 경우 "disabled"속성을 설정할 수 있습니다.

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" />