使用 Javascript 将禁用的输入字段转换为只读输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12766686/
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
With Javascript convert disabled input fields into readonly input fields
提问by Jayy
I have a problem with a form in IE. I have disabled fields in form i,e. field having property disabled="disabled". These fields show the input text in grey color and that looks very dull/blurred and if i try apply css changes to such fields, it will not work for IE, but works for other browsers like chrome, firefox.
我在 IE 中的表单有问题。我在表单中禁用了字段，即 具有属性的字段disabled="disabled"。这些字段以灰色显示输入文本，看起来非常沉闷/模糊，如果我尝试将 css 更改应用于这些字段，它将不适用于 IE，但适用于其他浏览器，如 chrome、firefox。
Is there any way to make the text to better font color here?
有什么办法可以使文本的字体颜色更好吗？
I thought one way of doing this is removing property disabled="disabled"and add property readonly="readonly"with javascript. If this is possible then how can i do this with Javascript. I am new to Javascript, so please help me
我认为这样做的一种方法是删除属性disabled="disabled"并readonly="readonly"使用 javascript添加属性。如果这是可能的，那么我如何使用 Javascript 做到这一点。我是 Javascript 的新手，所以请帮助我
Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.
下面的 HTML 来解释行为。在 IE 和其他浏览器中运行它以查看差异。
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
</body>
</html>
I am testing this in IE9.
我正在 IE9 中测试这个。
回答by Terry
You can change disabled input fields into readonly ones by using the .prop()method available in jQuery. I typically discourage the use of .attr(), and this is why.
您可以使用.prop()jQuery 中可用的方法将禁用的输入字段更改为只读字段。我通常不鼓励使用.attr()，这就是为什么.
$(function (){
$('input').prop({
'disabled': false,
'readonly': true
});
});
Although the method .removeProp()is available, documentation encourages refrain when using it, because, to quote, it "will remove the property completely and, once removed, cannot be added again to element. Use .prop()to set these properties to false instead."
尽管该方法.removeProp()可用，但文档鼓励在使用它时避免使用它，因为引用它“将完全删除属性，一旦删除，就无法再次添加到元素中。.prop()用于将这些属性设置为 false。”
View demo here: http://jsfiddle.net/teddyrised/tE98z/
在此处查看演示：http: //jsfiddle.net/teddyrised/tE98z/
回答by Diogo Rodrigues
Use the setAttribute property. Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly.
使用 setAttribute 属性。请注意，在示例中，如果选择 1，则在文本框上应用只读属性，否则删除属性只读。
http://jsfiddle.net/baqxz7ym/2/
http://jsfiddle.net/baqxz7ym/2/
document.getElementById("box1").onchange = function(){
if(document.getElementById("box1").value == 1) {
document.getElementById("codigo").setAttribute("readonly", true);
} else {
document.getElementById("codigo").removeAttribute("readonly");
}
};
<input type="text" name="codigo" id="codigo"/>
<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
回答by Robert Blasco Villarroya
if you disable the inputs programmatically can set style as you want
如果您以编程方式禁用输入可以根据需要设置样式
try it:
试试看：
//bloqueo todos los radiobuttons y checkboxs
//block all radiobuttons and checkbox
jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
jQuery(this).prop("checked", false);
});
//bloqueo campos de texto
//block all text fields
jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
jQuery(this).blur();
});
//bloqueo selects
//block all selects
jQuery(document).on("focusin", 'select.yourClass', function (event) {
var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
});
if you want set style they aren't technically disabled
如果您想要设置样式，它们在技术上不会被禁用
here can see the original code: https://jsfiddle.net/9kjqjLyq/
这里可以看到原代码：https: //jsfiddle.net/9kjqjLyq/
回答by Alcides Queiroz Aguiar
document.getElementById("your_field").readOnly=true;
or, with jQuery:
或者，使用 jQuery：
$('#your_field').attr('readonly', true);
回答by Harsha Venkatram
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
<script type = "text/javascript">
document.getElementById("disabled-field-id").disabled = false;
document.getElementById("disabled-field-id").readOnly = true;
</script>
</body>
</html>
回答by Sean Vaughn
You need to depend on a pure javascript(preferrably jQuery) solution.
您需要依赖纯 javascript（最好是 jQuery）解决方案。
Add a custom attribute to all your controls:
为所有控件添加自定义属性：
<input type="text" disabled="true" />
Now you can check if they are disabled and you can proceed to block them using javascript:
现在您可以检查它们是否被禁用，您可以继续使用 javascript 阻止它们：
var value = yourTextBox.value; //the last value that the control holds,
//before it was disabled?
$('yourTextBox').click(function() {
value = $(this).value;
});
$('yourTextBox').blur(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
To add more strictness, add another function:
要添加更多严格性，请添加另一个函数：
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
If you want something simple, I would recommend this:
如果你想要一些简单的东西，我会推荐这个：
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
return false;
});
