텍스트 입력을 편집 불가능으로 만들려면 어떻게 해야 합니까?

텍스트 입력을 편집 불가능으로 만들려면 어떻게 해야 합니까?

그래서 나는 문자 입력이 있습니다.

<input type="text" value="3" class="field left">

여기 제 CSS가 있습니다.

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px; 

이거 설정이나 트릭이 있나요, 제가 대신 레이블을 하려고 했는데 스타일링은 어떨까요.어떻게 변환해야 하며 더 나은 방법이 있습니까? 아니면 그것이 유일한 방법입니까?

<input type="text" value="3" class="field left" readonly>

스타일링이 필요 없습니다.

봐<input>MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes 에서

속성을 추가할 수 있습니다.readonly입력:

<input type="text" value="3"
       class="field left" readonly="readonly">

더 많은 정보: http://www.w3schools.com/tags/att_input_readonly.asp

사용할 수 있습니다.readonly속성(입력한 내용만 읽으려면)을 클릭합니다.그리고 당신은 사용할 수 있습니다.disabled속성, 입력을 표시하지만 완전히 비활성화하려면(PHP와 같은 처리 언어도 읽을 수 없음).

이용 가능한 답변을 작성하기 위해:

입력 요소는 읽기 전용이거나 사용하지 않도록 설정할 수 있습니다(편집 가능한 요소는 없지만 몇 가지 차이점이 있습니다: 포커스, ...).

여기에서 좋은 설명을 찾을 수 있습니다.
HTML 양식 입력 필드에 대해 비활성화됨="비활성화됨"과 읽기 전용="읽기 전용"의 차이점은 무엇입니까?

사용 방법:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

여기에 설명된 것처럼 CSS나 자바스크립트를 통해 만들 수 있는 몇 가지 해결책도 있습니다.

만약 당신이 CSS를 정말로 사용하고 싶다면, 필드를 편집할 수 없게 만드는 다음 속성을 사용하세요.

pointer-events: none;

더하다readonly:

<input type="text" value="3" class="field left" readonly>

값을 양식으로 제출하지 않으려면 대신 다음을 추가합니다.disabled기여하다.

<input type="text" value="3" class="field left" disabled>

이를 위해 항상 작동하는 CSS를 사용하는 방법은 없습니다.

왜죠? CSS는 아무것도 "비활성화"할 수 없습니다.디스플레이 또는 가시성을 끄고 사용할 수 있습니다.pointer-events: none그렇지만pointer-eventsIE 11보다 이전 버전의 IE에서는 작동하지 않습니다.

<input type="text" value="3" class="field left" readonly>

https://www.w3schools.com/tags/att_input_readonly.asp 에서 확인할 수 있습니다.

읽기 전용으로 설정하는 방법:

$("input").attr("readonly", true)

"읽기 전용"을 취소하려면(jQuery에서 작업):

$("input").attr("readonly", false)

마지막에 사용 안 함을 추가하면 됩니다.

<input type="text" value="3" class="field left" disabled>

React를 찾고 있는 경우 다음을 시도할 수 있습니다.

<input type="text" value="John" readOnly={true}/>

모든 입력에는 읽기 전용 또는 편집 가능한 필드가 있어야 하므로 이 필드를 사용합니다.

readonly그리고.disabled효과가 있을 것입니다.하지만 입력값을 보내고 싶다면, 그냥 사용하세요.readonly그리고 css.field left:css{outline:none}을(를) 편집합니다.

경우에 따라 입력 요소를 편집할 수 없거나 변경할 수 없도록 만들 수 있습니다. 즉, 텍스트 커서를 계속 배치하고 커서를 이동할 수 있지만 텍스트만 변경되지 않습니다.readOnly 또는 disabled와 다릅니다.

1. 순수 JS(jfidle)

document.getElementById('input')
  .addEventListener('keydown', (e) => {
  var field = e.target;
  var oldValue = field.value;
  setTimeout(function () {
    if(field.value !== oldValue) {
      field.value = oldValue;
    } 
  }, 1);
  })

<input id="input", type="text" value="default" class="field left">

2. JQuery(jfiddle) 사용

$("input").keydown(function(e) {
var oldValue=$(this).val();
var field=this;
setTimeout(function () {
    if(field.value !== oldValue) {
        $(field).val(oldValue);
    } 
}, 1);
});

<input id="input", type="text" value="default" class="field left">

언급URL : https://stackoverflow.com/questions/3676127/how-do-i-make-a-text-input-non-editable