关于JSP页面字段属性设为disabled或者readonly所带来的问题总结

本文介绍了如何通过设置HTML元素的tabIndex属性来控制Tab键在表单中的导航顺序,并解决了带有readonly属性的元素影响Tab键导航的问题。提出了三种解决方案:为可操作元素设置tabIndex值;为不可操作元素设置高tabIndex值;最佳方案是将不可操作元素的tabIndex设为-1。

  最近需要将页面一些自动求和的字段设为不可操作,当然disabled和readonly都可以实现,但是我的页面需求是来录入数据的,当用disabled时,该字段值是无法被获取并传到后台的,这时如果使用readonly,传递数据倒是可以解决,但是客户说了,要实现Tab键顺次跳动,而且跳过这些不可操作的字段,但是一般带readonly属性的自动是可以被Tab识别的,网上有以下三种方法解决:

  1.为所有可操作字段设定tabindex(0-32767)

  2.将不可操作字段设定一个非常大的数值,这样这些字段会在最后被获取焦点

  3.这是最好的解决方法:将不可操作字段的tabindex设为-1

注:将tabIndex赋值为-1,则在使用[Tab]键时,此元素被忽略,但使用-1值时,onfocus与onblur事件仍被启动。 tabIndex的值可为0至32767之间的任意数字。html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中。这样,当浏览者使用TAB键在网页控件中移动时,将首先移动到具有最小tabIndex属性值的控件上,最后在具有最大tabIndex属性值的控件上结束移动。  如果有两个控件的tabIndex属性相同,则以控件在html代码中出现的顺序为准。默认的tabIndex属性为 0 ,将排列在在所有指定tabIndex的控件之后。

转载于:https://www.cnblogs.com/hsuchan/p/3434670.html

<%@ page import="util.DbConnet" %> <%@ page import="java.sql.ResultSet" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% //功能:通过编号获取用户要编辑的具体数据 //1.接收传过来的编号 String id = request.getParameter("id"); //通过编号执行查询 String sql = "select * from `living_room_appliances` where `id`=?;"; Object[] params = new Object[]{ id }; ResultSet rs = DbConnet.select(sql, params);//真正执行查询,获得查询结果的数据集 //验证查询结果是否有数据(处理的是无数据情况) if(!rs.next()) response.sendRedirect("list.jsp"); %> <html> <head> <title>编辑用户</title> <link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/add.css"> </head> <body> <%--编辑: 1.点击编辑按钮,打开一个页面 2.新编辑页面需要包含: (1)表单 (2)输入框:账号、密码、确认密码、姓名 (3)按钮:保存(提交)、重置、返回 3.功能: 保存(提交):无刷新提交表单中的所有数据 重置:还原表单中的内容为初始状态 返回:重新打开列表页面(list.jsp) --%> <header> <div class="title">编辑电器</div> </header> <div class="main"> <form id="editForm"> <input type="hidden" name="id" value="<%=id%>"> <div class="form-item"> <label for="username">电器类型:</label> <%-- disabled:禁用元素(数据不传输) readonly:只读(不能编辑,可以传输) --%> <input disabled value="<%=rs.getString("appliance_type")%>" id="username" name="username" type="text"> </div> <div class="form-item"> <label for="realname">电器名称:</label> <input value="<%=rs.getString("appliance_name")%>" id="realname" name="realname" type="text"> </div> <div class="form-item"> <button class="primary" id="btnSubmit" type="button">保存</button> <button type="reset">重置</button> <button id="btnBack" type="button">返回</button> </div> </form> </div> <script src="../js/jquery-3.5.1.min.js"></script> <script src="../js/common.js"></script> <script> //绑定保存按钮的点击事件 $('#btnSubmit').on('click', function () { //1.验证不能为空:账号、密码、姓名 if(!checkInputIsNull('#username','账号')) return false; if(!checkInputIsNull('#password','密码')) return false; //比较两次输入的密码是否一致 if(!checkInputIsNull('#realname','姓名')) return false; //2.无刷新提交数据 postAction("/user/edit", $('#editForm').serialize(),function (res) { //1.弹出提示信息 alert(res.msg); //2.成功后返回列表页面(list.jsp) if(res.result) window.location.href = res.url; }); }); //绑定返回按钮的点击事件 $('#btnBack').on('click', function () { if(confirm("确定要返回吗?")){ window.location.href='list.jsp'; } }); </script> </body> </html> 帮我找出错误位置并修正
最新发布
07-06
<%@ page import="util.DbConnet" %> <%@ page import="java.sql.ResultSet" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% //功能:通过编号获取用户要编辑的具体数据 //1.接收传过来的编号 String id = request.getParameter("appliance_type"); //通过编号执行查询 String sql = "select * from `living_room_appliances` where `appliance_type`=?;"; Object[] params = new Object[]{ id }; ResultSet rs = DbConnet.select(sql, params);//真正执行查询,获得查询结果的数据集 //验证查询结果是否有数据(处理的是无数据情况) if(!rs.next()) response.sendRedirect("list.jsp"); %> <html> <head> <title>编辑用户</title> <link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/add.css"> </head> <body> <%--编辑: 1.点击编辑按钮,打开一个页面 2.新编辑页面需要包含: (1)表单 (2)输入框:账号、密码、确认密码、姓名 (3)按钮:保存(提交)、重置、返回 3.功能: 保存(提交):无刷新提交表单中的所有数据 重置:还原表单中的内容为初始状态 返回:重新打开列表页面(list.jsp) --%> <header> <div class="title">编辑用户</div> </header> <div class="main"> <form id="editForm"> <input type="hidden" name="id" value="<%=id%>"> <div class="form-item"> <label for="appliance_name">家电类型:</label> <%-- disabled:禁用元素(数据不传输) readonly:只读(不能编辑,可以传输) --%> <input disabled value="<%=rs.getString("appliance_type")%>" id="appliance_name" name="appliance_name" type="text"> </div> <div class="form-item"> <label for="realname">家电名称:</label> <input value="<%=rs.getString("appliance_name")%>" id="realname" name="realname" type="text"> </div> <div class="form-item"> <button class="primary" id="btnSubmit" type="button">保存</button> <button type="reset">重置</button> <button id="btnBack" type="button">返回</button> </div> </form> </div> <script src="../js/jquery-3.5.1.min.js"></script> <script src="../js/common.js"></script> <script> //绑定保存按钮的点击事件 $('#btnSubmit').on('click', function () { //1.验证不能为空:账号、密码、姓名 if(!checkInputIsNull('#username','账号')) return false; if(!checkInputIsNull('#password','密码')) return false; //比较两次输入的密码是否一致 //2.无刷新提交数据 postAction("/room/livinggedit", $('#editForm').serialize(),function (res) { //1.弹出提示信息 alert(res.msg); //2.成功后返回列表页面(list.jsp) if(res.result) window.location.href = res.url; }); }); //绑定返回按钮的点击事件 $('#btnBack').on('click', function () { if(confirm("确定要返回吗?")){ window.location.href='livingroom.jsp'; } }); </script> </body> </html>
07-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值