필드를 비활성화하지 않고 사용자가 텍스트 필드에 입력하는 것을 방지하는 방법은 무엇입니까?

나는 시도했다 :

$('input').keyup(function() {

   $(this).attr('val', '');

});

그러나 문자를 입력 한 후 입력 된 텍스트를 약간 제거합니다. 어쨌든 사용자가 텍스트 필드를 비활성화하지 않고 텍스트를 완전히 입력하지 못하게 할 수 있습니까?

쉽게 간과 될 수있는 비 자바 스크립트 대안 : readonly대신 속성 을 사용할 수 있습니까?disabled 있습니까? 입력의 텍스트를 편집하는 것을 방지하지만 브라우저는 입력의 스타일을 다르게 지정합니다 ( "회색으로 표시"할 가능성이 낮음).<input readonly type="text" ...>

필드가 "비활성화 됨"또는 약간만 보이게하지 않으려면 다음을 사용하십시오.

onkeydown="return false;"

기본적으로 greengit과 Derek이 말한 것과 동일하지만 조금 더 짧습니다.

$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});

$('input').keypress(function(e) {
    e.preventDefault();
});

사용자가 아무것도 추가하지 못하도록하고 문자를 지울 수있는 기능을 제공 하려는 경우 :

<input value="CAN'T ADD TO THIS" maxlength="0" />

maxlength입력 의 속성을로 설정하면 "0"사용자가 콘텐츠를 추가 할 수 없지만 원하는대로 콘텐츠를 지울 수 있습니다 .

그러나 진정으로 일정하고 변경할 수 없도록하려면 :

<input value="THIS IS READONLY" onkeydown="return false" />

onkeydown속성을로 설정하면 return false입력이 사용자 keypresses를 무시 하도록하여 값이 변경되거나 영향을받지 않도록합니다.

필요에 따라 사용할 수있는 또 하나의 방법 $('input').onfocus(function(){this.blur()}); 은 이것이 작성하는 방법이라고 생각합니다. 나는 jquery에 능숙하지 않습니다.

마크 업

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

스크립트

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}

추가가 불가능한 D3와 같은 동적 자바 스크립트 DOM 생성과 함께 작동하는 것을 추가하고 싶습니다.

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

HTML 입력 DOM 요소에 대한 작업을 방지하려면 클래스에 읽기 전용을 추가합니다.

var d = document.getElementById("div1");
d.className += " readonly";

또는 D3에서 :

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

그리고 CSS 이하에 추가 :

.readonly {
  pointer-events: none;
}

이 솔루션의 좋은 점은 생성시 D3에 통합 할 수 있도록 함수에서 동적으로 켜고 끌 수 있다는 것입니다 (단일 "readonly"속성으로는 불가능).

클래스에서 요소를 제거하려면 :

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

또는 Jquery를 사용하십시오.

$( "div" ).removeClass( "readonly" )

또는 수업 전환 :

$( "div" ).toggleClass( "readonly", addOrRemove );

완전하게, 행운을 빕니다 = ^)

아래와 같이 컨트롤 태그에 onkeydown = "return false"를 사용하면 사용자로부터 값을받지 않습니다.

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>

한 가지 옵션은 핸들러를 input이벤트 에 바인딩하는 것 입니다.

이 접근 방식의 장점은 사용자가 기대하는 키보드 동작 (예 : 탭, 페이지 위로 / 아래로 등)을 방지하지 않는다는 것입니다.

또 다른 장점은 컨텍스트 메뉴를 통해 텍스트를 붙여 넣어 입력 값이 변경된 경우에도 처리한다는 것입니다.

이 접근 방식은 입력을 비워 두는 데에만 관심이있을 때 가장 잘 작동합니다. 특정 값을 유지하려면 input이벤트가 수신 될 때 사용할 수 없기 때문에 다른 곳 (데이터 속성에서?)에서 추적해야 합니다.

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

<input type="text" />

Safari 10, Firefox 49, Chrome 54, IE 11에서 테스트되었습니다.

CSS 전용 솔루션의 pointer-events: none경우 입력 설정 을 시도 하십시오.