js readonly不起作用
在JavaScript中，readonly属性通常用于HTML表单元素，如<input>和<textarea>，以防止用户修改其值。如果你发现readonly属性不起作用，可能是以下几个原因：
基础概念
- readonly属性：这是一个布尔属性，当它被设置时，用户无法修改表单元素的值。但是，这个属性不会阻止通过JavaScript或其他脚本修改元素的值。
可能的原因及解决方法
- 属性拼写错误：
确保你正确地使用了
readonly属性，而不是readonly="true"或readonly="false"。正确的用法是直接使用readonly。 - 属性拼写错误：
确保你正确地使用了
readonly属性，而不是readonly="true"或readonly="false"。正确的用法是直接使用readonly。 - JavaScript覆盖：
如果页面上的JavaScript代码在运行时移除了
readonly属性，那么用户就可以编辑该字段。 - JavaScript覆盖：
如果页面上的JavaScript代码在运行时移除了
readonly属性，那么用户就可以编辑该字段。 - 要防止这种情况，确保没有脚本会修改这个属性。
- CSS样式影响：
某些CSS样式可能会使
readonly属性看起来不起作用，例如，如果输入框被其他元素覆盖，用户可能仍然可以与之交互。 - CSS样式影响：
某些CSS样式可能会使
readonly属性看起来不起作用，例如，如果输入框被其他元素覆盖，用户可能仍然可以与之交互。 - 浏览器兼容性问题：
尽管
readonly属性在所有现代浏览器中都得到了很好的支持，但在某些旧版本的浏览器中可能会出现问题。 - 确保你的目标浏览器支持
readonly属性。 - 表单提交时的值： 即使输入框是只读的，它的值仍然会在表单提交时发送到服务器。如果你希望在提交时忽略该字段的值，你需要通过JavaScript来处理。
- 表单提交时的值： 即使输入框是只读的，它的值仍然会在表单提交时发送到服务器。如果你希望在提交时忽略该字段的值，你需要通过JavaScript来处理。
应用场景
- 用户配置页面：在用户配置页面上，某些设置可能需要管理员权限才能更改，这时可以使用
readonly属性。 - 显示信息：在显示信息的页面上，如果某些信息不需要用户编辑，可以使用
readonly属性。
示例代码
以下是一个简单的HTML和JavaScript示例，展示了如何正确使用readonly属性，并防止JavaScript意外修改它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Readonly Example</title>
<script>
// 确保不会移除readonly属性
function preventChanges() {
let inputs = document.querySelectorAll('input[readonly]');
inputs.forEach(input => {
input.addEventListener('keydown', function(e) {
e.preventDefault();
});
});
}
window.onload = preventChanges;
</script>
</head>
<body>
<form id="myForm">
<input type="text" id="readOnlyInput" value="This is read only" readonly>
<button type="submit">Submit</button>
</form>
</body>
</html>在这个示例中，即使用户尝试在只读输入框中键入内容，也会被阻止。同时，表单提交时，只读字段的值仍然会被发送到服务器，但你可以根据需要修改JavaScript代码来处理这种情况。
相关·内容
1回答
我使用js如下所示，以防止单击某些单选按钮。但是在IE8上，它仍然不能检查，但是当单击组中的其他收音机时，默认值就消失了。$("body").on("change", ".readonly", function () {});
我如何使收音机成为可读的，也可以在IE8上工作？
浏览 4提问于2015-06-30得票数 3
回答已采纳
-bash: TMOUT: readonly variableTMOUT=900export TMOUT
操作系统: ubuntu
浏览 0提问于2022-04-26得票数 -2
这是 <p>First Name: </p> <input ng-model="second" ng-readonly="{{truefalse}
浏览 0提问于2014-01-03得票数 29
回答已采纳
我将输入字段设置为readonly，当它们获得焦点时，我删除readonly属性以防止自动填充行为，但它适用于除IE以外的所有浏览器。jsfiddle
我尝试了超时，我尝试了原生JS，似乎都不起作用，有什么建议吗？
浏览 1提问于2018-01-23得票数 0
7回答
禁用文本区域中的文本选择
、、、
禁用文本区对我不起作用。正如我所提到的，我希望用户能够通过单击位置来将插入符号放置在特定位置。如果我禁用了文本区域，这个功能就会丢失。
浏览 1提问于2013-10-02得票数 9
但我的应用程序在ie8中不起作用。<![endif]-->
</script>
<script src="
浏览 5提问于2014-05-22得票数 3
回答已采纳
4回答
当我通过id选择一个元素时，这对我来说很奇怪；jquery代码不起作用，但是当我通过classname选择它时，它工作得很好！type='text' ><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', true);});但此代码不起作
浏览 4提问于2015-03-03得票数 0
回答已采纳
这是我用源代码编写的代码，但在我的例子中不起作用。("The textbox is clicked.");}); <script src="http://code.jquery.com/jquery-1.9.1.js"></script><asp:TextBox ID="txDateRet" runat="server
浏览 3提问于2019-02-27得票数 0
回答已采纳
3回答
return false;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></scriptclass='amount amount-piece'>
<input type="text" name="amount2" id="amount2" val
浏览 4提问于2017-02-22得票数 2
回答已采纳
我想让文本框的readonly属性在页面加载时为true，在脚本运行时为false。我的代码是这样的： $("#txtname").attr('readonly',false); $("#txtem
浏览 1提问于2013-01-04得票数 2
回答已采纳
3回答
我有一个DataGridView，我想通过设置ReadOnly = true来禁用一些单元格/行。是否有其他可能阻止编辑特定行或单元格？
浏览 0提问于2011-03-15得票数 11
回答已采纳
URL列是DataGridViewLinkColumn，其ReadOnly属性在默认情况下设置为False。我可以编辑“名称”和“类型”列，但URL列显示为ReadOnly。为什么？
浏览 6提问于2016-03-18得票数 0
我正在探索Hashicorp Vault，并且正在尝试创建一个只读策略。此策略应仅允许用户读取密钥。path "transit/*" {}我使用下面的命令获取密钥(本例中为key1)：然而，我得到了以下错误：
Error reading transit/keys/key1: Error making API r
浏览 23提问于2021-05-31得票数 0
1回答
const repos = [ { name: 'angular', type: 'TS' },
const jsRepoTypes = FilterRepos<'JS'> // Should return the type object containingonly <em
浏览 4提问于2022-08-21得票数 1
回答已采纳
我的react应用程序中有一个屏幕，在左侧有一个项目列表，在右侧面板上显示所选项目的描述。每个项目都有一组图像(通常是每个项目3到4个图像)。当选择一个项目时，我向后端发出GET请求，以加载该项目的图像。然而，我注意到了巨大的内存增量，似乎每次选择一个项目之前加载的图像都没有从内存中释放出来： ? 我渲染的图像如下： <img src={`data:image/png;base64,${image.fileContent}`}/> 因此，我决定将img标记替换为自定义组件，以查看它们是否正在被卸载。所以我实现了这个组件： export class Image extend
浏览 28提问于2021-03-18得票数 0
我有一个文本框，我想禁用它，这样用户就不能输入任何他们想要的文本。要选择驱动程序，他们必须单击放大镜图像，此时将显示驱动程序列表。当他们从列表中选择动因时，它会将动因填充到文本框中。但是当我去保存它的时候，它的值是空白的，所以没有驱动程序被保存。问题是将textbox设置为Enabled = false。如果我删除这一行，驱动程序将保存。但是禁用文本框会保存一个空白值。如何阻止用户在文本框中输入文本，但仍然保存从列表中填充的值？
浏览 2提问于2016-01-28得票数 0
2回答
我有一个输入文本，用来显示计算结果： <input type="text" id="total" readonly/> 在js文件的函数中填充总数，如下所示： //Inside a .js file;
} 我还有一个重置按钮，它可以重置表单，但它不会重置只读输入文本： <input type="reset" value="Reset"/> 我试着更改了reset to按钮，并编写了我的函数来禁用<e
浏览 38提问于2020-03-27得票数 1
回答已采纳
在mris中，我必须从project_bom_line中拾取值，所有数量都隐含在行项目字段中。我这样做了，但当我保存它时，值也会消失，也不会保存在数据库中。我必须在Draft状态下实现这一点。
浏览 2提问于2014-02-12得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
