입력 type= 텍스트를 비활성화하는 방법?

입력 type= 텍스트를 비활성화하는 방법?

입력 필드의 유형에 대한 쓰기를 사용하지 않도록 설정합니다.text가능하다면 자바스크립트를 사용합니다.입력 필드는 데이터베이스에서 채워지므로 사용자가 값을 수정하지 않도록 해야 합니다.

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

아니면

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

참고:readOnlyFirefox(마법)에서 올바르게 작동하려면 camelCase에 있어야 합니다.

데모: https://jsfiddle.net/L96svw3c/ -- 간의 차이점을 어느 정도 설명합니다.disabled그리고.readOnly.

데이터베이스에 값이 있기 때문에 그런 것처럼 들리는 페이지를 렌더링할 때 알고 있다면 자바스크립트 대신 렌더링할 때 비활성화하는 것이 좋습니다.이렇게 하려면 속성(또는 양식 제출에서 제거하려는 경우)을 에 추가하면 됩니다.<input>, 다음과 같이:

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

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

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

나중에 자바스크립트로 비활성화해야 할 경우 "disabled" 속성을 설정할 수 있습니다.

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

가치를 표시하지 않는 것을 제안하는 이유는<input>제 경험으로는 배치 문제를 일으킨다는 겁니다텍스트가 길다면, 다음은.<input>사용자는 텍스트를 스크롤해야 하는데, 이것은 일반적인 사람들이 추측하는 것이 아닙니다.만약 당신이 그것을 A로 떨어뜨린다면,<span>좀 더 유연한 스타일링을 할 수 있을 것 같아요.

원하는 대로 입력 상자에 대한 참조 가져오기(예:document.getElementById('mytextbox')) 및 속성을 다음으로 설정합니다.true:

myInputBox.readonly = true;

또는 이 속성을 인라인으로 추가할 수도 있습니다(JavaScript는 필요 없음).

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

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

DOM 요소를 가져와 비활성화된 속성을 true/false로 설정할 수 있습니다.

vue framework를 사용한다면, 여기 아주 쉬운 데모가 있습니다.

  let vm = new Vue({
        el: "#app",
        data() {
            return { flag: true }
        },
        computed: {
            btnText() {
                return this.flag ? "Enable" : "Disable";
            }
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <input type="text" value="something" :disabled="flag" />
    <input type="button" :value="btnText" @click="flag=!flag">
</div>

// CSS Markup
        .disabled-input {
                     pointer-events: none;
                    }
// HTML
    <input class="disabled-input" />

순수 CSS 접근 방식을 찾고 있다면 클래스에 다음 속성을 부여하여 비활성화할 수 있습니다.

언급URL : https://stackoverflow.com/questions/2874688/how-to-disable-an-input-type-text