Html 如何使用 CSS 禁用表单字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5963099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I disable form fields using CSS?
提问by Anupam Jain
Is it possible to disable form fields using CSS? I of course know about the attribute disabled, but is it possible to specify this in a CSS rule? Something like -
是否可以使用 CSS 禁用表单字段？我当然知道禁用属性，但是否可以在 CSS 规则中指定它？就像是 -
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
disabled: true; /* Does not work */
}
</style>
The reason I'm asking is that, I have an application where the form fields are autogenerated, and fields are hidden/shown based on some rules (which run in Javascript). Now I want to extend it to support disabling/enabling fields, but the way the rules are written to directly manipulate the style properties of the form fields. So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal.
我问的原因是，我有一个应用程序，其中表单字段是自动生成的，并且字段是根据某些规则（在 Javascript 中运行）隐藏/显示的。现在我想扩展它以支持禁用/启用字段，但规则的编写方式是直接操作表单字段的样式属性。所以现在我必须扩展规则引擎来更改属性以及表单字段的样式，不知何故它似乎不太理想。
It's very curious that you have visible and display properties in CSS but not enable/disable. Is there anything like it in the still-under-works HTML5 standard, or even something non-standard (browser specific)?
很好奇您在 CSS 中有可见和显示属性但没有启用/禁用。仍在制定中的 HTML5 标准中是否有类似的东西，甚至是非标准的（特定于浏览器的）？
采纳答案by Fereydoon Barikzehy
This can be helpful:
这可能会有所帮助：
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Update:
更新：
and if want to disable from tab index you can use it this way:
如果想从选项卡索引中禁用，您可以这样使用它：
<input type="text" name="username" value="admin" tabindex="-1" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
回答by ANaimi
You can fake the disabled effect using CSS.
您可以使用 CSS 伪造禁用效果。
pointer-events:none;
You might also want to change colors etc.
您可能还想更改颜色等。
回答by Dutchie432
Since the rules are running in JavaScript, why not disable them using javascript (or in my examples case, jQuery)?
由于规则在 JavaScript 中运行，为什么不使用 javascript（或在我的示例中，jQuery）禁用它们？
$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable
UPDATE
更新
The attrfunction is no longer the primary approach to this, as was pointed out in the comments below. This is now done with the propfunction.
attr正如下面的评论所指出的那样，该函数不再是主要的方法。现在已通过prop函数完成此操作。
$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable
回答by BoltClock
It's very curious that you have visible and display properties in CSS but not enable/disable.
很好奇您在 CSS 中有可见和显示属性但没有启用/禁用。
It's very curious that you think that's very curious. You're misunderstanding the purpose of CSS. CSS is not meant to change the behaviorof form elements. It's meant to change their styleonly. 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.
很好奇你认为这很好奇。你误解了 CSS 的目的。CSS 并不是要改变表单元素的行为。这只是为了改变他们的风格。隐藏文本字段并不意味着文本字段不再存在，或者在您提交表单时浏览器不会发送其数据。它所做的只是将它隐藏在用户的视线之外。
To actually disable your fields, you mustuse the disabledattribute in HTML or the disabledDOM property in JavaScript.
要真正禁用您的字段，您必须使用disabledHTML 中的属性或disabledJavaScript 中的DOM 属性。
回答by mr_eclair
You can't use CSS to disable Textbox. solution would be HTML Attribute.
您不能使用 CSS 来禁用文本框。解决方案是 HTML 属性。
disabled="disabled"
回答by graphicdivine
The practical solution is to use CSS to actually hide the input.
实际的解决方案是使用 CSS 来实际隐藏输入。
To take this to its natural conclusion, you can write two html inputs for each actual input (one enabled, and one disabled) and then use javascript to control the CSS to show and hide them.
为了自然地得出结论，您可以为每个实际输入编写两个 html 输入（一个启用，一个禁用），然后使用 javascript 控制 CSS 以显示和隐藏它们。
回答by Larchy
first time answering something, and seemingly just a bit late...
第一次回答问题，似乎有点晚了......
I agree to do it by javascript, if you're already using it.
如果您已经在使用它，我同意通过 javascript 来完成它。
For a composite structure, like I usually use, I've made a css pseudo after element to block the elements from user interaction, and allow styling without having to manipulate the entire structure.
对于复合结构，就像我通常使用的那样，我在元素之后创建了一个 css 伪代码来阻止元素与用户交互，并允许在无需操纵整个结构的情况下进行样式设置。
For Example:
例如：
<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>
I can place a disabledclass on the wrapping div
我可以disabled在包装上放置一个类div
.disabled {
position : relative;
color : grey;
}
.disabled:after {
position :absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
content :' ';
}
This would grey text within the divand make it unusable to the user.
这会使 中的文本变灰div并使其对用户不可用。
回答by Kai Noack
I am always using:
我一直在使用：
input.disabled {
pointer-events:none;
color:#AAA;
background:#F5F5F5;
}
and then applying the css class to the input field:
然后将 css 类应用于输入字段：
<input class="disabled" type="text" value="90" name="myinput" id="myinput" />
回答by Shaze
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'
我知道这个问题已经很老了，但对于遇到此问题的其他用户，我想禁用输入的最简单方法就是通过 ':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.
实际上，如果您有一些脚本可以使用 javascript 或 jquery 动态/自动禁用输入，这些脚本会根据您添加的条件自动禁用。
In jQuery for Example:
以jQuery为例：
if (condition) {
// Make this input prop disabled state
$('input').prop('disabled', true);
}
else {
// Do something else
}
Hope the answer in CSS helps.
希望 CSS 中的答案有所帮助。
回答by Cfrim
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
恐怕您不能这样做，但是如果您不想将属性添加到字段，则可以在 jQuery 中执行以下操作。只需将其放在您的<head></head>标签中
$(document).ready(function(){
$(".inputClass").focus(function(){
$(this).blur();
});
});
If you are generating the fields in the DOM (with JS), you should do this instead:
如果你在 DOM 中生成字段（使用 JS），你应该这样做：
$(document).ready(function(){
$(document).on("focus", ".inputClass", function(){
$(this).blur();
});
});
