Posted on 2009-05-27 15:27
asnaper 阅读(2038)
评论(0) 编辑 收藏 引用 所属分类:
Web Dev
具有两个input控件和一个submit 按钮的一个HTML 表单:
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
Country: <input type="text" name="country" value="Norway"
readonly="readonly" /><br />
<input type="submit" value="Submit" />
</form>
Definition and Usage
The readonly attribute specifies that an input field should be read-only.
A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.
The readonly attribute can be set to keep a user from changing the value until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the readonly value, and make the input field editable.
The readonly attribute can be used with <input type="text"> or <input type="password">.
From:
http://www.w3schools.com/tags/att_input_readonly.asp
Conclusion:
Dev can use JS code to add/remove the readonly value to an element dynamically such as "element.readonly = true/false"
Sample:
<html>
<head>
<script type="text/javascript">
function updateElementsreadOnly(nodeName, bReadOnly)
{
var x =document.getElementsByName("myInput");
for(var i = 0; x[i]; i++)
{
x[i].readOnly = bReadOnly;
}
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<button onclick="updateElementsreadOnly('myInput', false)">去除只读</button>
<button onclick="updateElementsreadOnly('myInput', true)">添加只读</button>
</body>
</html>