code

CSS를 사용하여 폼 필드를 비활성화하려면 어떻게 해야 합니까?

starcafe 2023. 9. 25. 22:53
반응형

CSS를 사용하여 폼 필드를 비활성화하려면 어떻게 해야 합니까?

CSS를 사용하여 폼 필드를 비활성화하는 것이 가능합니까?물론 비활성화된 속성에 대해서는 알고 있지만, CSS 규칙에 이것을 명시하는 것이 가능합니까?뭔가...

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

문의하는 이유는 폼 필드가 자동 생성되고 일부 규칙(Javascript에서 실행되는)에 따라 필드가 숨김/표시되는 어플리케이션이 있기 때문입니다.이제 필드 비활성화/활성화를 지원하도록 확장하지만, 양식 필드의 스타일 속성을 직접 조작하기 위해 규칙을 작성하는 방식을 확장합니다.그래서 이제 폼 필드의 스타일뿐만 아니라 속성을 변경하기 위해 규칙 엔진을 확장해야 하는데, 어쩐지 이상적이지 못한 것 같습니다.

CSS에서 보이는 속성과 디스플레이 속성이 있지만 활성화/비활성화되지 않는 것은 매우 궁금합니다.아직 작업 중인 HTML5 표준에 이와 같은 것이 있습니까? 아니면 표준이 아닌 것(브라우저 특정)이 있습니까?

CSS를 사용하여 비활성화된 효과를 위장할 수 있습니다.

pointer-events:none;

색상 등을 변경하고 싶을 수도 있습니다.

도움이 될 수 있습니다.

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

업데이트:

탭 인덱스에서 비활성화하려면 다음과 같이 사용할 수 있습니다.

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

규칙은 자바스크립트에서 실행되고 있으므로 자바스크립트(또는 예를 들어 jQuery)를 사용하여 비활성화하는 것이 어떻습니까?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

갱신하다

attr아래 의견에서 지적된 바와 같이 기능은 더 이상 이에 대한 주요 접근 방식이 아닙니다.은 이제로 끝납니다.prop기능.

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

CSS에서 보이는 속성과 디스플레이 속성이 있지만 활성화/비활성화되지 않는 것은 매우 궁금합니다.

CSS의 목적을 잘못 이해하고 있습니다. CSS는 폼 요소의 동작을 변경하기 위한 것이 아닙니다.오직 그들의 스타일만 바꾸는 것입니다.텍스트 필드를 숨긴다는 것은 텍스트 필드가 더 이상 존재하지 않거나 양식을 제출할 때 브라우저가 데이터를 전송하지 않는다는 것을 의미하지 않습니다.그것은 사용자의 눈에서 그것을 숨기는 것뿐입니다.

실제로 필드를 비활성화하려면disableddisabled자바스크립트의 DOM 속성입니다.

CSS를 사용하여 Textbox를 비활성화할 수 없습니다. 솔루션은 HTML Attribute가 될 것입니다.

disabled="disabled"

실질적인 해결책은 CSS를 사용하여 실제로 입력을 숨기는 것입니다.

이를 자연스러운 결론으로 내리기 위해, 각 실제 입력에 대해 두 개의 html 입력(하나는 활성화, 하나는 비활성화)을 작성한 후 javascript를 사용하여 CSS를 표시하고 숨길 수 있습니다.

항상 사용하고 있는 항목:

input.disabled {
  pointer-events:none;
  color:#AAA;
  background:#F5F5F5;
}

그런 다음 CSS 클래스를 입력 필드에 적용합니다.

<input class="disabled" type="text" value="90" name="myinput" id="myinput">

처음으로 뭔가에 대답을 하고, 좀 늦은 것처럼 보이는...

당신이 이미 사용하고 있다면 자바스크립트로 하는 것에 동의합니다.

제가 주로 사용하는 복합 구조물의 경우, 저는 cs pseudo after element를 만들어 요소들을 사용자 상호작용으로부터 차단하고, 전체 구조물을 조작할 필요 없이 스타일링을 할 수 있게 했습니다.

예:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

나는 배치할 수 있습니다.disableddiv

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

이것은 그 안에서 회색 텍스트가 될 것입니다.div사용자가 사용할 수 없게 만듭니다.

JSFiddle 예제

input[name=username] {disabled: true; /* 작동하지 않음 */ }

이 질문이 꽤 오래된 것은 알지만 이 문제를 발견한 다른 사용자의 경우 입력을 비활성화하는 가장 쉬운 방법은 단순히 ':disabled'인 것 같습니다.

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

실제로 추가하는 조건에 따라 자동으로 비활성화되는 자바스크립트나 jquery로 입력을 동적/자동으로 비활성화하는 스크립트가 있다면,

예를 들어 jQuery:

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

CSS의 답이 도움이 되기를 바랍니다.

유감스럽게도 필드에 속성을 추가하지 않으려면 jQuery에서 다음 작업을 수행할 수 있습니다.요 .<head></head>꼬리표를 붙이다

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

(JS를 사용하여) DOM에 필드를 생성하는 경우 대신 다음 작업을 수행해야 합니다.

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

이 작업은 중요하지 않은 목적으로 입력 요소 위에 오버레이를 배치하여 수행할 수 있습니다.여기 순수 HTML과 CSS에 대한 제 예시가 있습니다.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

이런 목적으로 CSS를 사용할 방법은 없습니다.제 조언은 입력에 적용되는 css 클래스를 할당하거나 변경하는 자바스크립트 코드를 포함하는 것입니다.그와 같은 것:

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}
.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

에 입니다.pointer-events: none;지정된 여전히 수 control는 tabindex된 div입니다를 input { visibility: hidden; }입력이 "disabled"인 경우.
참조: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}
<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

위의 토막글에서 적용된 비활성화된 스타일링은 크롬 UI에서 가져온 것으로 다른 브라우저에서 비활성화된 입력과 시각적으로 동일하지 않을 수 있습니다.엔진별 CSS 확장 접두사를 사용하여 개별 브라우저에 대해 사용자 정의할 수 있습니다.언뜻 보기에는 다음과 같은 일이 있을 것 같지 않습니다.
Microsoft CSS 확장, Mozilla CSS 확장, WebKit CSS 확장

부가 가치를 도입하는 것이 훨씬 더 합리적인 것 같습니다.visibility: disabled아니면display: disabled아니면 아마도 심지어appearance: disabled, 라는 점을 감안하면visibility: hidden이미 관련된 제어 요소의 동작에 영향을 미칩니다.

언급URL : https://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css

반응형

'code' 카테고리의 다른 글

자바스크립트에서 이중 느낌표(!!!)는 어떻게 작동합니까?  (0) 2023.09.25
Oracle + dbunit에서 AmbidgeTableName 예외가 발생함  (0) 2023.09.25
PHP PDO 예외: "SQLSTATE[HY093]:잘못된 매개 변수 번호"  (0) 2023.09.25
Lodash _.filter 함수는 하나의 조건만 충족해야 합니다.  (0) 2023.09.25
Python에서의 XML 처리  (0) 2023.09.25

'code'의 다른글

  • 현재글CSS를 사용하여 폼 필드를 비활성화하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바