Hướng dẫn disable input javascript - vô hiệu hóa javascript đầu vào
|
Nếu dữ liệu được điền từ cơ sở dữ liệu, bạn có thể xem xét không sử dụng thẻ input:disabled{
background: #ccc;
}4 để hiển thị nó. Tuy nhiên, bạn có thể vô hiệu hóa nó ngay trong thẻ: Show Nếu bạn cần vô hiệu hóa nó với JavaScript sau, bạn có thể đặt thuộc tính "Đã tắt": Lý do tôi đề nghị không hiển thị giá trị là input:disabled{
background: #ccc;
}4 là, theo kinh nghiệm của tôi, nó gây ra các vấn đề về bố cục. Nếu văn bản dài, thì trong một input:disabled{
background: #ccc;
}4, người dùng sẽ cần thử và cuộn văn bản, đó không phải là điều mà người bình thường sẽ đoán để làm. Nếu bạn chỉ cần thả nó vào input:disabled{
background: #ccc;
}7 hoặc một cái gì đó, bạn có nhiều sự linh hoạt về kiểu dáng. ❮ Input Text Object ExampleDisable a text field: document.getElementById("myText").disabled = true; Try it Yourself » Definition and UsageThe disabled property sets or returns whether a text field is disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers. Browser Support
SyntaxReturn the disabled property: Set the disabled property: textObject.disabled = true|false Property Values
Technical Details
More ExamplesExampleFind out if a text field is disabled or not: var x = document.getElementById("myText").disabled; Try it Yourself » ExampleFind out if a text field is disabled or not: var x = document.getElementById("myText").disabled; Try it Yourself » Try it Yourself » Disable and undisable a text field:function disableTxt() { document.getElementById("myText").disabled = true; } function undisableTxt() { document.getElementById("myText").disabled = false; }
Định nghĩa và sử dụng
Cấu trúc:disabled {
property: value;
}Ví dụHTML viết:Hiển thị trình duyệt khi chưa có CSS:CSS viết:input:disabled{
background: #ccc;
}Hiển thị trình duyệt khi đã có css:Ta thấy những thành phần đang kích hoạt (disabled) đã được chọn. Trình duyệt hỗ trợ":disabled" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.
Định nghĩa và sử dụng
Cấu trúc:disabled {
property: value;
}Ví dụHTML viết:Hiển thị trình duyệt khi chưa có CSS:CSS viết:input:disabled{
background: #ccc;
}
Hiển thị trình duyệt khi đã có css:Ta thấy những thành phần đang kích hoạt (disabled) đã được chọn. Trình duyệt hỗ trợ":disabled" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống. Có thể vô hiệu hóa các trường biểu mẫu bằng CSS không? Tất nhiên tôi biết về thuộc tính bị vô hiệu hóa, nhưng có thể chỉ định điều này trong quy tắc CSS không? Cái gì đó như - Lý do tôi yêu cầu là, tôi có một ứng dụng trong đó các trường biểu mẫu được tự phát và các trường được ẩn/hiển thị dựa trên một số quy tắc (chạy trong JavaScript). Bây giờ tôi muốn mở rộng nó để hỗ trợ vô hiệu hóa/kích hoạt các trường, nhưng cách các quy tắc được viết để trực tiếp thao tác các thuộc tính kiểu của các trường mẫu. Vì vậy, bây giờ tôi phải mở rộng công cụ quy tắc để thay đổi các thuộc tính cũng như phong cách của các trường mẫu và bằng cách nào đó nó có vẻ ít hơn lý tưởng. Rất tò mò rằng bạn có các thuộc tính hiển thị và hiển thị trong CSS nhưng không cho phép/vô hiệu hóa. Có bất cứ điều gì giống như nó trong tiêu chuẩn HTML5 vẫn còn hoạt động, hoặc thậm chí là một cái gì đó không chuẩn (cụ thể của trình duyệt)? Khi được hỏi ngày 11 tháng 5 năm 2011 lúc 10:57May 11, 2011 at 10:57May 11, 2011 at 10:57 Anupam Jainanupam JainAnupam JainAnupam Jain 7.7112 Huy hiệu vàng38 Huy hiệu bạc74 Huy hiệu đồng2 gold badges38 silver badges74 bronze badges2 gold badges38 silver badges74 bronze badges 1 Bạn có thể giả mạo hiệu ứng bị vô hiệu hóa bằng CSS. Bạn cũng có thể muốn thay đổi màu sắc, v.v. Đã trả lời ngày 10 tháng 3 năm 2014 lúc 14:35Mar 10, 2014 at 14:35Mar 10, 2014 at 14:35 6 Điều này có thể hữu ích: Update: Và nếu muốn tắt từ chỉ mục tab, bạn có thể sử dụng nó theo cách này: Đã trả lời ngày 10 tháng 6 năm 2015 lúc 10:09Jun 10, 2015 at 10:09Jun 10, 2015 at 10:09 3 Vì các quy tắc đang chạy trong JavaScript, tại sao không vô hiệu hóa chúng bằng cách sử dụng JavaScript (hoặc trong trường hợp ví dụ của tôi, jQuery)? CẬP NHẬT Hàm input:disabled{
background: #ccc;
}4 không còn là cách tiếp cận chính cho việc này, như đã được chỉ ra trong các bình luận dưới đây. Điều này hiện được thực hiện với chức năng input:disabled{
background: #ccc;
}5.Đã trả lời ngày 11 tháng 5 năm 2011 lúc 11:00May 11, 2011 at 11:00May 11, 2011 at 11:00 Dutchie432Dutchie432Dutchie432Dutchie432 28.4K20 Huy hiệu vàng91 Huy hiệu bạc109 Huy hiệu đồng20 gold badges91 silver badges109 bronze badges20 gold badges91 silver badges109 bronze badges 10
Bạn đang hiểu lầm mục đích của CSS. CSS không có nghĩa là thay đổi hành vi của các yếu tố hình thức. Nó chỉ có nghĩa là thay đổi phong cách của họ. Việc ẩn một trường văn bản không có nghĩa là trường văn bản không còn ở đó hoặc trình duyệt sẽ không gửi dữ liệu của nó khi bạn gửi biểu mẫu. Tất cả những gì nó làm là che giấu nó khỏi mắt người dùng.behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes. Để thực sự vô hiệu hóa các trường của bạn, bạn phải sử dụng thuộc tính input:disabled{
background: #ccc;
}6 trong thuộc tính HTML hoặc input:disabled{
background: #ccc;
}6 DOM trong JavaScript.must use the input:disabled{
background: #ccc;
}6 attribute in HTML or the input:disabled{
background: #ccc;
}6 DOM property in JavaScript.must use the input:disabled{
background: #ccc;
}6 attribute in HTML or the input:disabled{
background: #ccc;
}6 DOM property in JavaScript.Koray Tugay 22.2K43 Huy hiệu vàng177 Huy hiệu bạc 304 Huy hiệu đồng43 gold badges177 silver badges304 bronze badges43 gold badges177 silver badges304 bronze badges Đã trả lời ngày 11 tháng 5 năm 2011 lúc 11:01May 11, 2011 at 11:01May 11, 2011 at 11:01 BoltclockboltclockBoltClockBoltClock 679K156 Huy hiệu vàng1365 Huy hiệu bạc1339 Huy hiệu Đồng156 gold badges1365 silver badges1339 bronze badges156 gold badges1365 silver badges1339 bronze badges 9 Bạn không thể sử dụng CSS để vô hiệu hóa hộp văn bản. Giải pháp sẽ là thuộc tính HTML. :disabled {
property: value;
}0Đã trả lời ngày 11 tháng 5 năm 2011 lúc 11:02May 11, 2011 at 11:02May 11, 2011 at 11:02 Vishwanath Dalvivishwanath DalviVishwanath DalviVishwanath Dalvi 34.5K41 Huy hiệu vàng122 Huy hiệu bạc152 Huy hiệu đồng41 gold badges122 silver badges152 bronze badges41 gold badges122 silver badges152 bronze badges 3 Giải pháp thực tế là sử dụng CSS để thực sự ẩn đầu vào. Để đưa ra kết luận tự nhiên của nó, bạn có thể viết hai đầu vào HTML cho mỗi đầu vào thực tế (một lần bật và một lần bị tắt) và sau đó sử dụng JavaScript để kiểm soát CSS để hiển thị và ẩn chúng. Đã trả lời ngày 11 tháng 5 năm 2011 lúc 11:06May 11, 2011 at 11:06May 11, 2011 at 11:06 đồ họaDivineGraphicdivinegraphicdivinegraphicdivine 11.2K7 Huy hiệu vàng31 Huy hiệu bạc58 Huy hiệu đồng7 gold badges31 silver badges58 bronze badges7 gold badges31 silver badges58 bronze badges 3 Tôi luôn luôn sử dụng: 0 và sau đó áp dụng lớp CSS cho trường đầu vào: 1 Đã trả lời ngày 23 tháng 4 năm 2015 lúc 8:08Apr 23, 2015 at 8:08Apr 23, 2015 at 8:08 AvataravatarAvatarAvatar Huy hiệu vàng 13.5k88 gold badges113 silver badges186 bronze badges8 gold badges113 silver badges186 bronze badges Lần đầu tiên trả lời một cái gì đó, và dường như hơi muộn ... Tôi đồng ý làm điều đó bởi JavaScript, nếu bạn đã sử dụng nó. Đối với cấu trúc tổng hợp, như tôi thường sử dụng, tôi đã tạo ra một giả CSS sau phần tử để chặn các yếu tố từ tương tác của người dùng và cho phép tạo kiểu mà không phải thao tác toàn bộ cấu trúc. Ví dụ: 2 Tôi có thể đặt một lớp input:disabled{
background: #ccc;
}6 trên gói input:disabled{
background: #ccc;
}93 Điều này sẽ màu xám trong input:disabled{
background: #ccc;
}9 và làm cho người dùng không thể sử dụng được.Ví dụ của tôi jsfiddle Đã trả lời ngày 24 tháng 11 năm 2013 lúc 22:03Nov 24, 2013 at 22:03Nov 24, 2013 at 22:03 LamchylarchyLarchyLarchy 1633 Huy hiệu bạc10 Huy hiệu đồng3 silver badges10 bronze badges3 silver badges10 bronze badges 4
Tôi biết câu hỏi này khá cũ nhưng đối với những người dùng khác gặp phải vấn đề này, tôi cho rằng cách dễ nhất để vô hiệu hóa đầu vào chỉ đơn giản là ': vô hiệu hóa' 4 Trong thực tế, nếu bạn có một số tập lệnh để vô hiệu hóa đầu vào động/tự động với javascript hoặc jQuery sẽ tự động vô hiệu hóa dựa trên điều kiện bạn thêm. Trong jQuery chẳng hạn: 5 Hy vọng câu trả lời trong CSS sẽ giúp. Đã trả lời ngày 18 tháng 1 năm 2018 lúc 12:45Jan 18, 2018 at 12:45Jan 18, 2018 at 12:45 ShazeshazeShazeShaze 7321 Huy hiệu vàng8 Huy hiệu bạc12 Huy hiệu đồng1 gold badge8 silver badges12 bronze badges1 gold badge8 silver badges12 bronze badges 1 Bạn không thể làm điều đó tôi sợ, nhưng bạn có thể làm như sau trong jQuery, nếu bạn không muốn thêm các thuộc tính vào các trường. Chỉ cần đặt cái này bên trong thẻ 6 Nếu bạn đang tạo các trường trong DOM (với JS), bạn nên làm điều này thay vào đó: 7 Đã trả lời ngày 6 tháng 8 năm 2013 lúc 9:18Aug 6, 2013 at 9:18Aug 6, 2013 at 9:18 CfrimcfrimCfrimCfrim 9109 Huy hiệu bạc17 Huy hiệu đồng9 silver badges17 bronze badges9 silver badges17 bronze badges Điều này có thể được thực hiện cho một mục đích không quan trọng bằng cách đặt một lớp phủ lên trên phần tử đầu vào của bạn. Đây là ví dụ của tôi trong HTML và CSS thuần túy. https://jsfiddle.net/1tL40L99/ 8 Đã trả lời ngày 25 tháng 2 năm 2015 lúc 0:14Feb 25, 2015 at 0:14Feb 25, 2015 at 0:14 Bảo vệgdefendogDeFeNdogDeFeNdog 1.1061 Huy hiệu vàng12 Huy hiệu bạc25 Huy hiệu đồng1 gold badge12 silver badges25 bronze badges1 gold badge12 silver badges25 bronze badges Không có cách nào để sử dụng CSS cho mục đích này. Lời khuyên của tôi là bao gồm một mã JavaScript trong đó bạn gán hoặc thay đổi lớp CSS được áp dụng cho các đầu vào. Một cái gì đó như vậy: 9 input:disabled{
background: #ccc;
}0input:disabled{
background: #ccc;
}1Đã trả lời ngày 27 tháng 4 năm 2015 lúc 14:00Apr 27, 2015 at 14:00Apr 27, 2015 at 14:00 Biến thể của giải pháp input:disabled{
background: #ccc;
}2input:disabled{
background: #ccc;
}3Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values input:disabled{
background: #ccc;
}2input:disabled{
background: #ccc;
}3Kiểu dáng bị vô hiệu hóa được áp dụng trong đoạn trích ở trên được lấy từ UI Chrome và có thể không giống nhau về mặt trực quan với các đầu vào bị vô hiệu hóa trên các trình duyệt khác. Có thể nó có thể được tùy chỉnh cho các trình duyệt riêng lẻ bằng cách sử dụng phần mở rộng CSS dành riêng cho động cơ -Prefixes. Mặc dù trong nháy mắt, tôi không nghĩ rằng nó có thể: Microsoft CSS Tiện ích mở rộng, tiện ích mở rộng Mozilla CSS, tiện ích mở rộng WebKit CSS Microsoft CSS extensions, Mozilla CSS extensions, WebKit CSS extensions Có vẻ hợp lý hơn nhiều khi giới thiệu một giá trị bổ sung Đã trả lời ngày 23 tháng 5 năm 2020 lúc 1:07May 23, 2020 at 1:07May 23, 2020 at 1:07 |
