如何将jsp中<input>设为只读

本文介绍了如何在HTML中使用readonly和disabled属性将input变为只读状态,并讨论了两者之间的区别及使用JavaScript获取只读input值的方法。此外,文章还提供了设置input可用性和不可用性的JS代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

将一个input变为只读,可以使用 readonly 属性 和 disabled 属性。
用disabled 属性时,文字显示为灰色。
下面的两种方法都是可以的:

<input id ="" name="" readonly />
<input id ="" name="" disabled />

[color=red]但是,使用 disabled 时,表单提交后,在后台将不会取到值了。[/color]

如果想得到值.就用javascript来拼值。如:

<script>
function onc(){
var valuemes=document.form[0].mes.value;
document.form[0].invalue=valuemes;
documnet.form[0].submit();
}
</script>

<form action="test">
<input type="hidden" name="invalue">
<input type="text" value="你好" name="mes" disabled="disabled">
<input type="button" value="提交" onclick="onc()">
</form>


[b][color=red]建议用 readonly[/color] [/b]


[b]注:[/b]有时候设置某个input 是否提交,可以在js中这样写:

//设置可用
document.getElementById("xxx").disabled="disabled";
//设置不可用
document.getElementById("xxx").enabled;



引用:
[url]http://bbs.youkuaiyun.com/topics/380063466[/url]


-
转载请注明
原文出处: http://lixh1986.iteye.com/blog/1746928
-


-
<%@ 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
<%@ 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值