Tắt hộp văn bản bằng cách sử dụng CSS

Cách tắt hộp văn bản trong CSS? Hiện tại chúng tôi đang có một hộp văn bản trong chế độ xem của chúng tôi có thể được bật/tắt tùy thuộc vào thuộc tính trong mô hình. Chúng tôi đang xem asp.net MVC; tùy thuộc vào giá trị của thuộc tính Mô hình, chúng tôi cần hiển thị hộp văn bản hoặc hộp văn bản chỉ đọc. chúng tôi đã nghĩ đến việc này bằng cách áp dụng CSS cho điều khiển chế độ xem. Có ai đó đã làm điều này trước đó không?Tắt hộp văn bản bằng cách sử dụng CSS

Nguồn

2010-03-16 Balaji

Lưu ý rằng có sự khác biệt nhỏ giữa 'chỉ đọc' và 'bị tắt'. Trong cả hai trường hợp, giá trị không thể chỉnh sửa được, nhưng giá trị cũ sẽ gửi giá trị cho phía máy chủ, trong khi giá trị sau sẽ không được. Ngoài ra sau này có trong hầu hết các webbrowsers một phong cách mặc định khác nhau (tối hơn/xám). – BalusC

CSS không thể tắt hộp văn bản, tuy nhiên bạn có thể tắt hiển thị hoặc chế độ hiển thị.

display: none; 
visibility: hidden;

Hoặc bạn cũng có thể thiết lập các HTMLattribute:

disabled="disabled"

Nguồn

2010-03-16 22:24:41

Bạn không thể tắt bất kỳ thứ gì với CSS, đó là vấn đề chức năng. CSS dành cho các vấn đề thiết kế. Bạn có thể tạo ấn tượng của một hộp văn bản bị vô hiệu hóa, bằng cách thiết lập các màu bị xóa trên đó.

Để thực vô hiệu hóa các phần tử, bạn nên sử dụng người khuyết tật thuộc tính boolean:

<input type="text" name="lname" disabled />

Demo: http://jsfiddle.net/p6rja/

Hoặc, nếu bạn thích, bạn có thể thiết lập này qua JavaScript:

document.forms['formName']['inputName'].disabled = true;

Bản trình diễn: http://jsfiddle.net/655Su/

Hãy nhớ rằng các đầu vào bị tắt sẽ không chuyển giá trị của chúng thông qua khi bạn đăng dữ liệu trở lại máy chủ. Nếu bạn muốn giữ dữ liệu nhưng không cho phép chỉnh sửa trực tiếp, bạn có thể muốn đặt dữ liệu đó thành readonly thay thế.

// Similar to <input value="Read-only" readonly> 
document.forms['formName']['inputName'].readOnly = true;

Demo: http://jsfiddle.net/655Su/1/

này không thay đổi giao diện người dùng của nguyên tố này, vì vậy bạn sẽ cần phải làm điều đó cho mình:

input[readonly] { 
    background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

Bạn cũng có thể nhắm mục tiêu bất kỳ yếu tố tàn tật:

input[disabled] { /* styles */ }

Nguồn

2010-03-16 22:24:00 Sampson

Bạn không thể tắt hộp văn bản trong CSS. Vô hiệu hóa nó không phải là một nhiệm vụ hiện tại, bạn sẽ phải làm điều này trong đánh dấu HTML bằng cách sử dụng thuộc tính disabled.

Bạn có thể đặt thứ gì đó lại với nhau bằng cách đặt hộp văn bản bên dưới phần tử trong suốt được định vị hoàn toàn với chỉ mục z ... Nhưng điều đó thật ngớ ngẩn, cộng với bạn sẽ cần phần tử HTML thứ hai.

Bạn có thể, tuy nhiên, phong cách hộp văn bản khuyết tật (nếu đó là những gì bạn có ý nghĩa) trong CSS sử dụng

input[disabled] { ... }

từ IE7 trở lên và trong tất cả các trình duyệt lớn khác.

Nguồn

2010-03-16 22:24:19

** chỉ cần sao chép dán mã này và chạy bạn sẽ nhìn thấy hộp vô hiệu hóa **

<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="[email protected]" /> 
     <div class="overlay"> 
     </div> 
     </div> 
</body> 
</html>

Nguồn

2010-06-28 12:30:41

** Mã mà không có lời giải thích thường là một câu trả lời xấu trên Stack ** Dù sao, điều này rất ít cho rất nhiều toàn bộ mã. Nó chỉ cho sự xuất hiện của bị vô hiệu hóa và theo một cách khá lộn xộn. Nếu nhà phát triển chấp nhận điều này là hợp lệ, họ có thể dễ dàng sử dụng 'input.disabled' và thêm lớp học qua javascript nếu cần. Bạn cũng có thể sử dụng trình xử lý sự kiện trên 'focus' để' blur'. Các giải pháp dễ dàng thích ứng với nhiều hơn một phần tử. –

Đi sâu hơn về Pekka của câu trả lời, tôi đã có một phong cách "style1" trên một số hộp văn bản của tôi. Bạn có thể tạo "style1 [disabled]" để bạn chỉ tạo kiểu hộp văn bản bị tắt bằng cách sử dụng kiểu "style1":

.style1[disabled] { ... }

Đã làm việc ok trên IE8.

Nguồn

2011-01-19 17:34:30 GBU

'style1' là một tên lớp khủng khiếp. Nó được tạo ra bởi một công cụ? – alex

@alex Haha không, tên là một loại chuỗi pt-br khó xử vì vậy tôi đã sử dụng "style1". – GBU

bạn có thể vô hiệu hóa thông qua css:

pointer-events: none;

Không làm việc ở khắp mọi nơi mặc dù.

Nguồn

2012-03-27 03:11:16 abbie

Nhập văn bản vẫn có thể được gắn thẻ vào. – alex

'con trỏ-sự kiện: none' không được hỗ trợ bởi IE 8, 9, chỉ dành cho phần tử SVG chỉ trong 10 và cuối cùng được hỗ trợ trong 11, theo bài đăng trong http://stackoverflow.com/questions/5855135/css -pointer-events-property-alternative-for-ie – vapcguy

Chỉ cần thử điều này.

<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>

Điều này sẽ không cho phép bất kỳ ký tự nào được nhập bên trong Hộp văn bản.

Nguồn

2013-03-13 11:24:46

Cẩn thận với điều này. Người dùng vẫn có thể nhấp chuột phải và chọn dán từ trình đơn ngữ cảnh để dán dữ liệu vào hộp văn bản. –

Tắt hộp văn bản bằng cách sử dụng CSS

Trả lời

Các vấn đề liên quan