设置html整个页面只读,如何将整个HTML表单“只读”？

最新推荐文章于 2023-12-08 10:41:17 发布

weixin_39834475

最新推荐文章于 2023-12-08 10:41:17 发布

阅读量1.4k

点赞数

文章标签：设置html整个页面只读

12 个答案:

答案 0 :(得分：205)

将输入字段和其他内容包装到

并为其提供disabled="disabled"属性。

select somethihng

woot

this

答案 1 :(得分：9)

并非所有表单元素都可以设置为readonly，例如：

复选框

收音机盒

文件上传

...更多..

然后合理的解决方案是设置所有表单元素＆＃39; disabled属性为true，因为OP没有声明具体的＆＃34;锁定＆＃34;表单应该发送到服务器(disabled属性不允许)。

下面的演示中提供的另一个解决方案是在form元素的顶部放置一个图层，这将阻止与form元素内的所有元素进行任何交互，因为该图层设置了更大的z-index值：

样本：

＆＃13;

var form = document.forms[0], // form element to be "readonly"

btn1 = document.querySelectorAll('button')[0],

btn2 = document.querySelectorAll('button')[1]

btn1.addEventListener('click', lockForm)

btn2.addEventListener('click', lockFormByCSS)

function lockForm(){

btn1.classList.toggle('on');

[].slice.call( form.elements ).forEach(function(item){

item.disabled = !item.disabled;

});

}

function lockFormByCSS(){

btn2.classList.toggle('on');

form.classList.toggle('lock');

}＆＃13;

form{ position:relative; }

form.lock::before{

content:'';

position:absolute;

z-index:999;

top:0;

right:0;

bottom:0;

left:0;

}

button.on{ color:red; }＆＃13;

Lock / Unlock Form

Lock / Unlock Form (with CSS)

Some Form

Checkbox

option 1

option 2

option 3

options 1

options 2

options 3

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：6)

您可以使用此功能禁用表单：

function disableForm(formID){

$('#' + formID).children(':input').attr('disabled', 'disabled');

}

请注意，它使用jQuery。

答案 3 :(得分：5)

在确认页面上，不要将内容放在可编辑的控件中，只需将它们写入页面即可。

答案 4 :(得分：4)

我知道没有内置的方法来执行此操作，因此您需要根据表单的复杂程度提出自定义解决方案。你应该阅读这篇文章：

编辑：根据您的更新，您为什么如此担心只读？您可以通过客户端执行此操作但如果不是，则必须将必需的标记添加到每个控件或转换数据并将其显示为没有控件的原始文本。如果你试图让它只读，以便下一篇文章不会被修改，那么你有一个问题，因为任何人都可以搞乱帖子来产生他们想要的东西所以当你实际上最终收到数据时你最好再次检查它确保它有效。

答案 5 :(得分：3)

没有完全兼容的官方HTML方式，但是一点点javascript可以走很长的路。

您将遇到的另一个问题是禁用的字段不会显示在POST数据中

答案 6 :(得分：3)

所有浏览器都支持的另一种简单方式是：

HTML：

CSS：

.disabled {

pointer-events: none;

opacity: .4;

}

但是请注意，制表符仍然可以使用这种方法，并且具有焦点的元素仍可以由用户操纵。