如何实现JSP页面控件的不可编辑——disabled readonly

本文介绍了如何使用readonly和disabled属性锁定网页控件,探讨了这两种属性的区别,并提供了一个批量设置disabled属性的示例函数。
部署运行你感兴趣的模型镜像
很多时候,页面上的一些项目是不能够进行编辑的。这时候,我们可以用2种方法来实现。

1.设置readonly属性

例如:

<td align="left">
    <input type="text" id="usrId" name="usrId" value="${form.usrId}" readonly />
  </td>

设置readonly属性后,控件的背景色和未设置该属性的控件背景色是一样的。因此,为了更好的界面友好性,我们修改上面的代码

<input type="text" id="usrId" name="usrId" value="${form.usrId}" style="background:#FFFF00" readonly />

readonly属性用于input,textarea等。


2.设置disabled属性

disabled属性适用于所有控件,例如input,textarea,select等。且设置后背景色为灰色,点击控件不能得到焦点。

<input type="text" id="usrId" name="usrId" value="${form.usrId}" disabled />


3.readonly和 disabled的区别

readonly没有背景色 disabled有

readonly可以获得焦点 disabled不能

readonly可以在action中获得值 disabled不能

要想在Form提交后,让设置了disabled属性的属性值能在action中得到,那么我们需要在form提交前设置disabled = false


4.如果页面上需要设置disabled属性的控件比较多,那么可以Form中onload下面的function

function disableOcx()
    {
      var form = document.forms[0];
      for (var i = 0; i < form.length; ++i) {
        var element = form.elements[i];
     
        if (element.name) {
        if (element.nodeName == "INPUT") {
          if(element.name != 'return'){
            element.disabled="true";
          element.readOnly = true;
          }
        }
        else if (element.nodeName == "SELECT") {
          element.disabled = true;
        }
        else if (element.nodeName == "TEXTAREA") {
          element.disabled = true;
        }
        }
      }
    }

 

以内内容转自网络:http://blog.sina.com.cn/s/blog_6f92e3a70100p9cj.html


您可能感兴趣的与本文相关的镜像

Wan2.2-T2V-A5B

Wan2.2-T2V-A5B

文生视频
Wan2.2

Wan2.2是由通义万相开源高效文本到视频生成模型,是有​50亿参数的轻量级视频生成模型,专为快速内容创作优化。支持480P视频生成,具备优秀的时序连贯性和运动推理能力

<think>首先,用户的问题是:“JSP页面置灰字段可编辑”,翻译成英文是:JSP page grayed out field is editable。这可能是在问如何在JSP页面中使一个灰显的字段变得可编辑。 回顾之前的对话: - 用户多次强调要使用中文回答问题,并在结束时提出3-5个相关问题,格式必须是“§§相关问题§§”开头,然后列出问题,禁止换行分散。 - 我之前的回答是关于JavaScript回调函数解析的,现在用户的新查询是关于JSP页面设置灰显字段为可编辑。 所以,我需要: 1. 用中文回答这个问题。 2. 解释如何使JSP页面中的灰显字段可编辑。 3. 在回答结束后,基于这个问题和我的回答,提出3-5个相关问题。 4. 相关问题的第一行必须是“§§相关问题§§”,然后列出问题,不能换行分散。 主题是JSP(Java Server Pages),灰显字段通常意味着字段在视觉上是灰色的,可能表示不可编辑状态(如disabledreadonly)。用户提到“可编辑”,所以焦点在于如何从不可编辑状态切换为可编辑。 关键点: - 在JSP中,字段通常是HTML元素,如input。 - 灰显效果通常由CSS控制(例如background-color: gray或类似)。 - 可编辑性由HTML属性控制,如disabledreadonly。 常见方式: - 使用disabled属性会使字段不可编辑、灰显(浏览器默认样式)。 - 使用readonly属性使字段只读,但可能不灰显;需要额外CSS。 - 用户说“置灰字段”,暗示字段已经是灰显的,可能是disabled或通过CSS灰显。 目的是使这个字段可编辑。方法可能包括: 1. 移除disabled属性。 2. 添加JavaScript事件来切换状态。 3. 使用CSS来改变外观。 4. 在表单提交时处理。 在JSP中,这通常涉及HTML/CSS/JavaScript,可能结合Java后端逻辑。 结构我的回答: - 先解释灰显字段的含义。 - 给出几种实现方法。 - 提供代码示例。 - 结束部分:提出相关问题。 相关问题必须基于用户问题和我的回答。可能的: - JSP如何动态改变字段编辑状态? - 如何用CSS定制灰显字段的样式? - 后端如何控制前端字段的可编辑性? - 处理表单提交时的相关问题。 确保格式: - 回答用中文。 - 结束部分:"§§相关问题§§" 然后立即列出问题,用数字点,不换行。 示例格式提醒: - 开头是问题解释。 - 可能包括代码块。 - 结尾是相关问题。 撰写回答: 1. 引入:解释灰显字段。 2. 方法:如何使可编辑。 3. 代码示例:JSP/HTML with JavaScript. 4. 相关建议。 5. 结束部分:"§§相关问题§§" 并列出3-5个问题。 </think>在JSP页面中,使一个置灰(灰显)的字段变得可编辑,通常需要通过修改HTML元素的属性和样式来实现。置灰效果通常由CSS样式(如背景色灰显)和属性控制(如`disabled`或`readonly`),而使其可编辑需要动态移除这些限制。以下是核心方法和实现步骤: ### 核心解决方案详解 1. **理解置灰原因** - **视觉灰显**:通过CSS设置,例如 `background-color: #eee;` 或 `opacity: 0.7;` - **功能限制**:通常由HTML属性控制: - `disabled`:字段灰显且完全不可交互(表单提交时忽略值) - `readonly`:字段可聚焦但不可编辑(表单提交时包含值) 2. **使字段可编辑的常用方法** - **移除 `disabled` 属性**:直接恢复交互能力 - 使用JavaScript动态移除:`element.removeAttribute("disabled");` - 注意:移除后需重置CSS以避免视觉冲突 - **切换 `readonly` 状态**:适合需要保留表单值的场景 ```javascript document.getElementById("fieldId").readOnly = false; // 设为可编辑 ``` - **CSS样式重置**:移除灰显样式 ```css /* 移除默认灰显 */ input:disabled, input[readonly] { background-color: white !important; /* 恢复背景色 */ opacity: 1 !important; /* 恢复透明度 */ cursor: text; /* 显示可编辑光标 */ } ``` ### 完整JSP页面实现示例 以下是一个JSP页面示例,结合HTML、CSS和JavaScript实现置灰字段的动态切換: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>置灰字段编辑控制</title> <style> .gray-field { background-color: #eee; /* 灰显样式 */ color: #555; } .editable-field { background-color: white; /* 可编辑样式 */ color: black; border: 1px solid #ccc; } </style> </head> <body> <h2>用户信息表单</h2> <form id="userForm"> <!-- 初始置灰的输入框 --> 用户名: <input type="text" id="username" class="gray-field" disabled value="默认用户"> <!-- 切换按钮 --> <button type="button" onclick="toggleEdit()">切换编辑状态</button> </form> <script> function toggleEdit() { const field = document.getElementById("username"); if (field.disabled) { // 移除禁用状态并更新样式 field.removeAttribute("disabled"); field.className = "editable-field"; // 应用可编辑样式 } else { // 恢复置灰状态 field.setAttribute("disabled", ""); field.className = "gray-field"; } } </script> </body> </html> ``` ### 关键注意事项 - **后端集成**:如果字段状态依赖后端数据(如从数据库加载的可编辑标志),可以在JSP中使用EL表达式: ```jsp <input type="text" id="roleField" <%= request.getAttribute("isEditable") ? "" : "disabled" %>> ``` - **浏览器兼容性**:某些浏览器(如旧版IE)可能对`disabled`属性的样式覆盖不友好,需测试。 - **表单提交**:确保在提交前移除`disabled`(否则值不会发送给服务器)。 - **安全风险**:避免直接依赖前端状态控制敏感字段,后端必须二次验证可编辑权限。 ### 推荐最佳实践 1. **使用jQuery简化操作**(如果项目中已引入): ```jsp <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $("#editToggleBtn").click(function() { $("#username").prop("disabled", false).removeClass("gray-field").addClass("editable-field"); }); </script> ``` 2. **结合AJAX动态更新**:当用户权限变化时,通过AJAX从服务器获取可编辑状态。 3. **响应式设计**:使用CSS伪类`:enabled`和`:disabled`自动管理样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值