posts - 5, comments - 0, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

在HTML页中Disable/Enable 一个控件

Posted on 2009-05-27 15:27 asnaper 阅读(1909) 评论(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>


只有注册用户登录后才能发表评论。
【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理