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;
색상 등을 변경하고 싶을 수도 있습니다.
규칙이 JavaScript로 실행되므로 javascript (또는 예제에서는 jQuery)를 사용하여 규칙을 비활성화하지 않는 이유는 무엇입니까?
$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable
최신 정보
attr아래 댓글에서 지적 된 바와 같이 기능은 더 이상이에 대한 기본 접근 방식입니다. 이것은 이제 prop기능으로 수행됩니다 .
$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable
도움이 될 수 있습니다.
<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>
CSS에 표시 및 표시 속성이 있지만 활성화 / 비활성화하지 않은 것이 매우 궁금합니다.
그것이 매우 궁금하다고 생각하는 것이 매우 궁금합니다. CSS의 목적을 오해하고 있습니다. CSS는 양식 요소 의 동작 을 변경하기위한 것이 아닙니다 . 스타일 만 변경하기위한 것 입니다 . 텍스트 필드를 숨겨도 텍스트 필드가 더 이상 존재하지 않거나 양식을 제출할 때 브라우저가 데이터를 보내지 않는다는 의미는 아닙니다. 그것은 사용자의 눈에서 그것을 숨기기 만하면됩니다.
실제로 비활성화하여 필드에, 당신은 해야한다 사용 disabledHTML의 특성 또는 disabled자바 스크립트 DOM 속성을.
CSS를 사용하여 텍스트 상자를 비활성화 할 수 없습니다. 해결책은 HTML 속성입니다.
disabled="disabled"
실용적인 해결책은 CSS를 사용하여 실제로 입력을 숨기는 것입니다.
자연스럽게 결론을 내릴 수 있도록 각 실제 입력에 대해 두 개의 html 입력 (하나는 사용 가능하고 하나는 사용 불가능)을 작성한 다음 javascript를 사용하여 CSS를 표시하고 숨길 수 있습니다.
처음으로 무언가에 대답하고 겉보기에는 약간 늦었습니다 ...
이미 사용하고 있다면 자바 스크립트로 동의합니다.
필자가 일반적으로 사용하는 복합 구조의 경우 사용자 상호 작용으로부터 요소를 차단하고 전체 구조를 조작하지 않고도 스타일을 지정할 수 있도록 css 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>
disabled랩핑에 수업을 할 수 있습니다div
.disabled {
position : relative;
color : grey;
}
.disabled:after {
position :absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
content :' ';
}
이 안에 텍스트가 회색으로 표시되어 div사용자가 사용할 수 없게됩니다.
나는 항상 사용하고 있습니다 :
input.disabled {
pointer-events:none;
color:#AAA;
background:#F5F5F5;
}
그런 다음 CSS 클래스를 입력 필드에 적용하십시오.
<input class="disabled" type="text" value="90" name="myinput" id="myinput" />
You cannot do that I'm afraid, but you can do the following in jQuery, if you don't want to add the attributes to the fields. Just place this inside your <head></head> tag
$(document).ready(function(){
$(".inputClass").focus(function(){
$(this).blur();
});
});
If you are generating the fields in the DOM (with JS), you should do this instead:
$(document).ready(function(){
$(document).on("focus", ".inputClass", function(){
$(this).blur();
});
});
input[name=username] { disabled: true; /* Does not work */ }
I know this question is quite old but for other users who come across this problem, I suppose the easiest way to disable input is simply by ':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>
In reality, if you have some script to disable the input dynamically/automatically with javascript or jquery that would automatically disable based on the condition you add.
In jQuery for Example:
if (condition) {
// Make this input prop disabled state
$('input').prop('disabled', true);
}
else {
// Do something else
}
Hope the answer in CSS helps.
This can be done for a non-critical purpose by putting an overlay on top of your input element. Here's my example in pure HTML and 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>
There's no way to use CSS for this purpose. My advice is to include a javascript code where you assign or change the css class applied to the inputs. Something like that :
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>참고URL : https://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css
'Programing' 카테고리의 다른 글
| UIButton에서 이미지 아래 레이블 (0) | 2020.06.12 |
|---|---|
| Ruby에서 문자열을 작성할 때 삽 연산자 (<<)가 더하기 등호 (+ =)보다 선호되는 이유는 무엇입니까? (0) | 2020.06.12 |
| JSON 문자열을 사전으로 변환하는 방법? (0) | 2020.06.12 |
| Sublime Text 2 및 3에서 키보드로 사이드 바를 사용하는 방법은 무엇입니까? (0) | 2020.06.12 |
| 전체 iOS 앱에 기본 글꼴을 설정 하시겠습니까? (0) | 2020.06.12 |