在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。
其实前端的所有JS输入框都是input，所以可通过$("#table1 :input").attr("disabled",true);达到目的，此功能的验证实例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function setDisabled(bo) {
$("#table1 :input").attr("disabled",bo);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="启用" onclick="setDisabled(false)" />
<input id="Button2" type="button" value="禁用" onclick="setDisabled(true)" />
<table id="table1" >
<tr>
<td>
<input id="Text1" type="text" />
</td>
<td>
<input id="Password1" type="password" />
</td>
</tr>
<tr>
<td>
<select id="Select1">
<option>1</option>
</select>
</td>
<td>
<input id="Checkbox1" type="checkbox" />
<input id="Radio1" type="radio" />
</td>
</tr>
<tr>
<td>
<input id="File1" type="file" />
</td>
<td>
<textarea id="TextArea1" cols="20" rows="2"></textarea>
</td>
</tr>
</table>
</body>
</html>
相关推荐
本示例旨在揭示如何通过客户端，特别是利用JavaScript，来修改那些通常被视为只读的输入框内容。下面我们将深入探讨这个主题。 首先，了解"只读"属性。在HTML中，`readonly`属性用于定义一个输入字段为只读，这意味...
本文将详细探讨如何使用JS生成自定义的输入框，并介绍一款名为"xcConfirm"的开源输入框组件。 首先，我们来了解JS生成输入框的基本原理。在HTML中，输入框通常是通过`<input>`标签来创建的，例如`...
以上总结了使用JavaScript来限制`input`元素的各种常见应用场景，包括但不限于取消虚线框、只读模式、限制输入类型等。这些技术可以帮助开发者更好地控制用户输入，提升用户体验的同时也提高了数据的有效性和安全性...
2. **禁用状态**：根据业务需求，可以设置输入框为只读或禁用状态，防止用户手动输入。 3. **自定义样式**：利用Bootstrap或其他CSS框架，定制加减按钮的样式，使之更符合项目需求。 4. **国际化**：如果应用需要...
最后，我们在`<body>`标签的`onload`事件中调用`init`函数，确保页面加载完成后执行`selectReadOnly`，将下拉框设置为只读状态。 通过这种方式，虽然select元素本身不具备只读特性，但我们利用JavaScript模拟了只读...
通过以上分析，我们可以看出，通过合理地利用JavaScript中的事件监听机制和DOM API，我们可以实现精细控制用户交互的效果。对于`Backspace`键的操作，我们可以根据当前焦点所在元素的类型以及是否可编辑来决定是否...
`ReadonlyText`函数可能用于将文本输入框设置为只读，这样用户无法修改其内容，但不会改变其显示样式。具体实现未给出，通常会像下面这样操作： ```javascript function ReadonlyText(textarea) { textarea....
10. **输入框状态管理**：通过JavaScript或框架（如React、Vue等）可以跟踪输入框的状态，如`value`（当前值）、`disabled`（禁用状态）和`readonly`（只读状态）。 11. **输入框插件与库**：为了提供更高级的功能...
在JavaScript编程中，处理只读文本框时遇到的一个普遍问题是，当用户在只读文本框获得焦点的情况下按下了回退键（backSpace），浏览器会将焦点转移回前一个页面，这可能会导致用户意外地丢失之前填写的所有数据。...
在Web开发中，有时我们需要为用户提供一个便捷的方式来重置表单或页面上的所有输入字段，尤其是文本框。然而，并非所有的表单都适合使用HTML表单元素自带的`reset`方法来实现这一功能。例如，在页面布局较为复杂或者...
### JavaScript 实现 Input 输入框相关限制用法 在 Web 开发中，经常需要对用户的输入进行限制或格式化处理，以确保数据的有效性和安全性。本文将详细介绍如何利用 JavaScript 和 HTML 来实现各种输入框限制功能。 ...
通过JavaScript，你可以动态地控制主表与明细表之间的交互，比如根据主表字段的值来决定明细表中某些列的显示或隐藏。这可以优化用户界面，只展示必要的信息，提高操作效率。 2. **字段验证**： 在表单中，对输入...
修改的时候用户的账号不能修改，因此需要将账号的输入框属性设置为”只读”。 代码样例 账号 v-bind:disabled=dataForm.id!> v-bind:disabled=dataForm.id!=0 dataForm.id初始值为0 当修改操作时，dataForm.id是...
此部分定义了一个简单的HTML页面结构，包含一个只读的文本输入框，其初始值为10，并具有一个id属性为"time"，以便JavaScript可以通过这个ID来访问并修改它的值。 #### JavaScript逻辑 ```javascript var t = 10; ...
- 最后，将结果写入到页面的 "result" 输入框中，这个输入框被设置为只读，所以用户不能直接修改。 在HTML部分，我们看到一个简单的表单包含两个输入字段（num1和num2）、一个结果字段（result）以及五个按钮，每...
本文将详细介绍如何使用JavaScript来控制上传进度条的显示，并提供一段示例代码以便于理解和应用。 #### 二、核心概念 1. **HTML元素**：用于构建页面结构，如`<input>`和`<div>`等。 2. **JavaScript**：负责逻辑...
MD5是一种常用的哈希函数，它可以将任意长度的消息压缩到固定长度的...以上代码在页面中包含了一个输入框，一个按钮和一个只读的输出框。用户在输入框中输入需要加密的字符串，点击按钮即可生成对应的MD5加密字符串。
为了实现屏蔽Backspace事件的目的，同时又不干扰到输入框的操作，我们需要检测事件的目标元素是否是输入框，以及输入框的类型和是否处于只读状态。通过判断 `event.srcElement.type` 属性的值是否为 `text`、`...
- `readonly`：设置输入框为只读，用户无法修改内容。 - `disabled`：禁用输入框，使其不可用。 3. **CSS样式**：可以通过CSS来改变文本框的外观，如边框、背景色、字体等。 ```css input[type="text"] { ...