javascript 使用 jquery 只读
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11010239/
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
readonly with jquery
提问by Abude
i'm trying to add readonly to all the inputs and then on the click remove the readonly to make it works for typing. the readonly set for all inputs part works but the remove on click doesn't work please help.
我正在尝试将 readonly 添加到所有输入，然后单击删除 readonly 以使其适用于打字。所有输入部分的只读设置有效，但点击删除不起作用，请帮助。
my code :
我的代码：
<script language="javascript">
$(document).ready(function()
{
$('#secureFields :input').attr('readonly', true);
$('.readonly').click(
function()
{
if ($('.readonly').attr("readonly") == true)
{
$('.readonly').val('');
$('.readonly').removeAttr("readonly");
}
});
});
</script>
html is like this :
html是这样的：
<table class='table' id='secureFields' >
<tr>
<td width=200>First Name:</td>
<td><input readonly='readonly' type='text' name='firstname' size=30 class='required'/></td>
</tr>
<tr>
采纳答案by Christoph
important note: don't write language="javascript"but type="text/javascript"
重要提示：不要写language="javascript"但是type="text/javascript"
You have to select the inputs with attributereadonly, not classreadonly.
您必须使用attribute只读而不是class只读来选择输入。
So do the following:
因此，请执行以下操作：
$('input[readonly]').click(
instead of
代替
$('.readonly').click(
and then you just need one line:
然后你只需要一行：
$(this).removeProp("readonly");
This is the correct code:
这是正确的代码：
$('input[readonly]').click(function(){
$(this).removeProp("readonly");
});
Check out the Examplefiddle
FYI: Script are not stopped by your readonly, they can simply set the value of the field...
仅供参考：您的脚本不会停止脚本readonly，它们可以简单地设置字段的值...
回答by Sudhir Bastakoti
回答by Subash
the class you specified is 'required' so $('.readonly').attr("readonly") == trueshould be
$('.required').attr("readonly") == trueand so on
您指定的课程是“必需的”，所以$('.readonly').attr("readonly") == true应该
$('.required').attr("readonly") == true如此等等
回答by Darren
<html>
<table class='table' id='secureFields'>
<tr>
<td width=200>First Name:</td>
<td><input type='text' name='firstname' size=30 class='required'/></td>
</tr>
</table>
<button id="btnEnableInputs" type="button">Enable!</button>
</html>
$(document).ready(function() {
$("#secureFields :input").each(function() {
$(this).attr("readonly", true);
});
$("#btnEnableInputs").click(function() {
$("#secureFields :input").each(function() {
$(this).attr("readonly", false);
});
});
});
回答by undefined
try this:
试试这个：
$('input').click(function() {
$(this).prop('readonly', false)
});
回答by Gntem
try this
试试这个
$(document).ready(function () {
$('#secureFields :input').attr('readonly', true);
$('input[readonly]').click(
function (event) {
if ($(event.currentTarget).attr("readonly") == "readonly") {
$(event.currentTarget).removeAttr("readonly");
$(event.currentTarget).val("");
}
});
});
this changes attribute readonly on the input that was clicked, hope it helps
这会更改单击的输入的只读属性，希望对您有所帮助
回答by jathin
comment the script part/**/ to check readonly mode
<body>
<table class='table' id='secureFields' >
<tr>
<td width=200>First Name:</td>
<td><input readonly="readonly" type='text' name='firstname' size=30 class='required'/></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).ready(function()
{
$('#secureFields:input').attr('readonly', true);
$('.required').val('');
$('.required').focus(
function()
{
if ($('.required').attr("readonly") == true)
{
$('.required').removeAttr("readonly");
}
});
});
</script>
回答by John Dvorak
To prevent autocomplete, you can just add autocomplete="off" in the input tag or the form tag (if set for both, the input value takes precedence, so you can use autocomplete="on" for individual tags.
为了防止自动完成，您可以在输入标签或表单标签中添加 autocomplete="off"（如果两者都设置，则输入值优先，因此您可以对单个标签使用 autocomplete="on"。
Anyways, the .selector selects elements with a specific class, not attribute. You can:
无论如何， .selector 选择具有特定类的元素，而不是属性。你可以：
Select using the attribute selector: input[readonly] to select inputs where the readonly attribute exists, or input[readonly="readonly"] to select input where the attribute is set to itself (first one being preferred).
使用属性选择器进行选择： input[readonly] 选择存在 readonly 属性的输入，或 input[readonly="readonly"] 选择属性设置为自身的输入（第一个是首选）。
In fact, you don't need to select only the inputs which have the attribute set and you can write the following to remove the readonly attribute as soon as it is clicked:
事实上，您不需要只选择具有属性集的输入，您可以编写以下内容以在单击后立即删除 readonly 属性：
$('input').click(function(){
$(this).removeAttr('readonly')
}
Still, you probably just want <input autocomplete="off" ...> all along.
不过，您可能只想要 <input autocomplete="off" ...> 一直。
回答by moribvndvs
Perhaps you want simply:
也许您只想：
$('#secureFields :input').click(function() {
$('input[readonly]').val('').removeAttr('readonly');
});
Since there is no readonlyCSS selector in the HTML, and thus your script does nothing since it references .readonly, I have to make assumptions about what you are trying to do. The above will make all readonly fields non-readonly and clear the current value when any input is clicked.
由于readonlyHTML 中没有CSS 选择器，因此您的脚本在引用后什么都不做.readonly，因此我必须对您要执行的操作做出假设。以上将使所有只读字段变为非只读，并在单击任何输入时清除当前值。
