如何使整个HTML表单变为“只读”？

16 浏览
0 Comments

如何使整个HTML表单变为“只读”？

我有两个包含HTML表单的页面。第一个页面有一个提交表单，第二个页面有一个确认表单。第一个表单提供许多控件选择，而第二个页面会再次显示来自提交表单的数据，并附带确认信息。在第二个表单中，所有字段都必须是静态的。\n据我所见，有些表单控件可以设置为readonly，而所有控件都可以设置为disabled，不同之处在于您仍然可以使用Tab键访问只读字段。\n有没有一种办法可以将整个表单标记为只读/禁用/静态，以使用户无法更改任何控件，而不是逐个字段进行设置？

0

3 答案

0 Comments

问题的原因：原问题的提问者需要一种方法来使整个HTML表单变为只读状态，但是提供的解决方法使用了客户端的jQuery库，而提问者无法使用客户端的解决方案。

解决方法：提问者需要一种不依赖于客户端的解决方案来使整个HTML表单变为只读状态。

以下是提供的解决方法：

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

这个函数可以用来禁用表单。然而，这个解决方法使用了jQuery库，因此无法满足提问者的要求。

0
0 Comments

如何使整个HTML表单只读？

有时候我们希望将整个HTML表单设置为只读，不允许用户进行任何修改。然而，并不是所有的表单元素都可以设置为只读，比如复选框、单选按钮和文件上传等。在这种情况下，我们需要找到其他解决方案。

一种合理的解决方法是将所有表单元素的disabled属性设置为true。因为题主并没有说明特定的"锁定"表单应该发送到服务器上（而disabled属性不允许）。因此，将所有表单元素的disabled属性设置为true是一个合理的解决办法。

另一种解决方法是在表单元素上方放置一个图层，阻止用户与表单元素内的所有元素交互。这是通过设置该图层的z-index值较大来实现的。

下面是一个演示示例：

JavaScript代码：

var form = document.forms[0]; // 表单元素
var btn1 = document.querySelectorAll('button')[0]; // 第一个按钮
var 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');
}

CSS代码：

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
button.on{ color:red; }

HTML代码：






  

    Some Form

需要注意的是，CSS解决方案是不完整的，因为它无法阻止键盘导航。

0
0 Comments

如何使整个HTML表单为"只读"？

问题原因：用户想要将整个HTML表单设置为只读，但是不知道如何实现。

解决方法：将输入字段和其他内容包裹在<fieldset>标签中，并给它添加disabled="disabled"属性。

示例代码如下：

注意：这种方法的副作用是，被<fieldset>包裹的表单控件将无法接收任何浏览事件，如鼠标点击和焦点相关的事件。如果在子元素上定义了js事件监听器，则可能无法正常工作。但在禁用状态下，这正是大多数情况下所需的。

此方法有效，但禁用的表单元素的值不会传递给处理器方法，这正是你想要的。

如果想要向用户显示输入字段已被禁用的状态，可以在页面底部添加以下jQuery代码：

if($('#fieldsetid').prop('disabled')){
   $('#fieldsetid :input').addClass('readonly');
}

注意，这种方法在提交表单时不会发送数据，因此并不真正实现只读模式。

如果想要根据条件禁用表单，是否有办法将disabled属性的值设置为false以保持启用状态？使用Angular时，可以这样做：<fieldset disabled="disabled", data-ng-disabled="false">，但这种方法可能有些奇怪。

总之，上述方法并不能实现将表单设置为只读，而只是禁用了表单。请注意，在保存被禁用的表单时，所有字段的值将保存为空字符串，即相当于删除。

0