CSS를 사용하여 텍스트 상자 비활성화
CSS에서 텍스트 상자를 비활성화하는 방법은 무엇입니까? 현재 뷰에 모델의 속성에 따라 활성화 / 비활성화 할 수있는 텍스트 상자가 있습니다. asp.net MVC보기가 있습니다. Model 속성의 값에 따라 텍스트 상자 또는 읽기 전용 텍스트 상자를 렌더링해야합니다. 뷰 컨트롤에 CSS를 적용하여이 작업을 수행하려고했습니다. 누군가이 일을 일찍 했습니까?
CSS는 텍스트 상자를 비활성화 할 수 없지만 표시 또는 가시성을 끌 수 있습니다.
display: none;
visibility: hidden;
또는 HTML 속성을 설정할 수도 있습니다.
disabled="disabled"
css를 통해 비활성화 할 수 있습니다.
pointer-events: none;
그래도 모든 곳에서 작동하지 않습니다.
CSS로 아무것도 비활성화 할 수 없습니다. 이는 기능상의 문제입니다. CSS는 디자인 문제를위한 것입니다. 바랜 색상을 설정하여 텍스트 상자가 비활성화 된 느낌을 줄 수 있습니다.
실제로 요소를 비활성화 하려면 disabled 부울 속성을 사용해야합니다.
<input type="text" name="lname" disabled />
데모 : http://jsfiddle.net/p6rja/
또는 원하는 경우 JavaScript를 통해 설정할 수 있습니다.
document.forms['formName']['inputName'].disabled = true;
데모 : http://jsfiddle.net/655Su/
비활성화 된 입력은 데이터를 서버에 다시 게시 할 때 해당 값을 전달하지 않습니다. 데이터를 보관하고 싶지만 직접 편집 할 수없는 경우 readonly대신 로 설정하는 것이 좋습니다.
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
데모 : http://jsfiddle.net/655Su/1/
이것은 요소의 UI를 변경하지 않으므로 직접 수행해야합니다.
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
비활성화 된 요소를 타겟팅 할 수도 있습니다.
input[disabled] { /* styles */ }
CSS에서 텍스트 상자를 비활성화 할 수 없습니다. 비활성화하는 것은 프리젠 테이션 작업이 아니므로 disabled속성을 사용하여 HTML 마크 업에서이 작업을 수행해야 합니다.
Z- 색인을 사용하여 절대 위치에있는 투명한 요소 아래에 텍스트 상자를 배치하여 무언가를 결합 할 수 있습니다.하지만 그것은 어리석은 일이며 어쨌든 두 번째 HTML 요소가 필요합니다.
그러나 CSS에서 비활성화 된 텍스트 상자의 스타일을 지정할 수 있습니다.
input[disabled] { ... }
IE7 이상 및 기타 모든 주요 브라우저에서.
**이 코드를 복사하여 붙여넣고 실행하면 텍스트 상자가 비활성화 된 것을 볼 수 있습니다 **
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>.container{float:left;width:200px;height:25px;position:relative;}
.container input{float:left;width:200px;height:25px;}
.overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;}
</style>
</head>
<body>
<div class="container">
<input type="text" value="rvi.tom@gmail.com" />
<div class="overlay">
</div>
</div>
</body>
</html>
Pekka의 답변에 대해 더 나아가, 일부 텍스트 상자에 "style1"스타일이 있습니다. "style1 [disabled]"를 생성하여 "style1"스타일을 사용하여 비활성화 된 텍스트 상자의 스타일 만 지정할 수 있습니다.
.style1[disabled] { ... }
IE8에서 정상적으로 작동했습니다.
Just try this.
<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>
This won't allow any characters to be entered inside the TextBox.
Short answer
No, you can't disable a textbox using CSS.
Long answer
pointer-events: none works but on IE the CSS property only works with IE 11 or higher, so it doesn't work everywhere on every browser. Except for that you cannot disable a textbox using CSS.
However you could disable a textbox in HTML like this:
<input value="...." readonly />
But if the textbox is in a form and you want the value of the textbox to be not submitted, instead do this:
<input value="...." disabled />
So the difference between these two options for disabling a textbox is that disabled cannot allow you to submit the value of the input textbox but readonly does allow.
For more information on the difference between these two, see "What is the difference between disabled="disabled" and readonly="readonly".
another way is by making it readonly
<input type="text" id="txtDis" readonly />
ReferenceURL : https://stackoverflow.com/questions/2458595/disable-a-textbox-using-css
'program tip' 카테고리의 다른 글
| Rails 번 들러는 그룹 내에 gem을 설치하지 않습니다. (0) | 2021.01.05 |
|---|---|
| junit : 테스트를 찾을 수 없음 (0) | 2021.01.05 |
| Windows에서 파일 이름 유효성 검사 (0) | 2021.01.05 |
| GIT에서 삭제 취소 (0) | 2021.01.05 |
| WCF, Rest 및 SOAP의 관계는 무엇입니까? (0) | 2021.01.05 |