blocks|key|953453|text|将输入字段和其他内容包装到<fieldset>中，并为其提供disabled="disabled"属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|953454|示例(http://jsfiddle.net/7qGHN/)：|953455|​|953456|<form>
++++<fieldset+disabled="disabled">
++++++++<input+type="text"+name="something"+placeholder="enter+some+text"+/>
++++++++<select>
++++++++++++<option+value="0"+disabled="disabled"+selected="selected">select+somethihng</option>
++++++++++++<option+value="1">woot</option>
++++++++++++<option+value="2">is</option>
++++++++++++<option+value="3">this</option>
++++++++</select>
++++</fieldset>
</form>|code-block|syntax|javascript|953457|953458|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7qGHN/^0|D|A|U|J|0|3|Q|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Wrap the input fields and other stuff into a <code>&lt;fieldset&gt;</code> and give it the <code>disabled="disabled"</code> attribute.</p>

<p>Example (<a href="http://jsfiddle.net/7qGHN/" rel="noreferrer">http://jsfiddle.net/7qGHN/</a>):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;fieldset disabled="disabled"&gt;
        &lt;input type="text" name="something" placeholder="enter some text" /&gt;
        &lt;select&gt;
            &lt;option value="0" disabled="disabled" selected="selected"&gt;select somethihng&lt;/option&gt;
            &lt;option value="1"&gt;woot&lt;/option&gt;
            &lt;option value="2"&gt;is&lt;/option&gt;
            &lt;option value="3"&gt;this&lt;/option&gt;
        &lt;/select&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|953404|text|在确认页面上，不要将内容放在可编辑控件中，只需将它们写入页面即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953405|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>On the confirmation page, don't put the content in editable controls, just write them to the page.</p>


blocks|key|953318|text|没有完全兼容的、官方的HTML方式可以做到这一点，但是一小段javascript就能帮上大忙。您将遇到的另一个问题是禁用的字段不会显示在POST数据中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953319|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>There's no fully compliant, official HTML way to do it, but a little javascript can go a long way.
Another problem you'll run into is that disabled fields don't show up in the POST data</p>


blocks|key|1167740|text|最简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167741|$('#yourform+*').prop('readonly',+true);|code-block|syntax|javascript|1167742|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Easiest way</p>

<pre><code>$('#yourform *').prop('readonly', true);
</code></pre>


blocks|key|1167883|text|另一种所有浏览器都支持的简单方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167884|HTML：|1167885|<form+class="disabled">
++<input+type="text"+name="name"+/>
++<input+type="radio"+name="gender"+value="male">
++<input+type="radio"+name="gender"+value="female">
++<input+type="checkbox"+name="vegetarian">
</form>|code-block|syntax|javascript|1167886|CSS：|1167887|.disabled+{
++pointer-events:+none;
++opacity:+.4;
}|1167888|但请注意，can键仍然适用于这种方法，并且具有焦点的元素仍然可以由用户操作。|1167889|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Another simple way that's supported by all browsers would be:</p>

<p>HTML:</p>

<pre><code>&lt;form class="disabled"&gt;
  &lt;input type="text" name="name" /&gt;
  &lt;input type="radio" name="gender" value="male"&gt;
  &lt;input type="radio" name="gender" value="female"&gt;
  &lt;input type="checkbox" name="vegetarian"&gt;
&lt;/form&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.disabled {
  pointer-events: none;
  opacity: .4;
}
</code></pre>

<p>But be aware, that the tabbing still works with this approach and the elements with focus can still be manipulated by the user.</p>


blocks|key|1167559|text|对所有的表单id进行编号，并在JS中运行for循环。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167560|+for(id+=+0;+id<NUM_ELEMENTS;+id%2B%2B)
+++document.getElementById(id).disabled+=+false;+|code-block|syntax|javascript|1167561|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Have all the form id's numbered and run a for loop in JS.   </p>

<pre><code> for(id = 0; id&lt;NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 
</code></pre>


blocks|key|953512|text|我更喜欢使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953513|$('#'%2BformID).find(':input').attr('disabled',+'disabled');|code-block|syntax|javascript|953514|find()比child+()深入到第n个嵌套的子级，后者只查找直接的子级。|953515|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I'd rather use jQuery:</p>

<pre><code>$('#'+formID).find(':input').attr('disabled', 'disabled');
</code></pre>

<p>find() would go much deeper till nth nested child than children(), which looks for immediate children only.</p>


blocks|key|1168036|text|一个简单的需求:用最少的代码显示不可编辑的表单(该表单可以在以后变为可编辑的表单)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1168037|如果你不能使用'disabled‘属性(因为它会在POST中擦除值的输入)，并且注意到html属性'readonly’只在文本区域和一些输入(文本，密码，搜索，据我所见)上起作用，最后，如果你不想费心去复制所有带有隐藏输入逻辑的select，checkbox和radio，你可能会找到下面的函数或者他的任何内部逻辑：|1168038|​|1168039|addReadOnlyToFormElements+=+function+(idElement)+{
++++
++++++++//+textarea+an+input+of+type+(text+password+search)+work+with+the+html+readonly
++++++++$('#'+%2B+idElement+%2B+'+textarea,+#'+%2B+idElement+%2B+'+input').prop('readonly',true);
++++
++++++++//+but+you+still+have+to+destroy+their+associated+objects,+as+I.E,+datepicker+(in+our+old+project,+datepicker+is+appended+to+input+where+'Date'+is+in+name+attribut,+don't+ask+why)
++++++++$('#'+%2B+idElement+%2B+'+input[name*="Date"]').datepicker('destroy');
++++
++++++++//+html+readonly+don't+work+on+input+of+type+checkbox+and+radio,+neither+on+select.+So,+a+safe+trick+is+to+disable+the+non-selected+items
++++++++$('#'+%2B+idElement+%2B+'+input[type="checkbox"]:not(:checked),+#'+%2B+idElement+%2B+'+input[type="radio"]:not(:checked)').prop('disabled',true);+
++++++++$('#'+%2B+idElement+%2B+'+select>option:not([selected])').prop('disabled',true);
++++
++++++++//+and,+on+the+selected+ones,+to+disable+mouse/keyoard+events+and+mimic+readOnly+appearance
++++++++$('#'+%2B+idElement+%2B+'+input[type="checkbox"]:checked').prop('tabindex','-1').css('pointer-events','none').css('opacity','0.5');
++++++++$('#'+%2B+idElement+%2B+'+input[type="radio"]:checked').css('opacity','0.5');
++++++++$('#'+%2B+idElement+%2B+'+select').css('background-color','#eee');
++++}|code-block|syntax|javascript|1168040|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>|1168041|1168042|没有什么比删除这些只读文件更容易的了|1168043|1168044|removeReadOnlyFromFormElements+=+function+(idElement)+{

++++//+just+remove+the+html+readonly+on+textarea+and+input
++++$('#'+%2B+idElement+%2B+'+textarea,+#'+%2B+idElement+%2B+'+input').prop('readonly',false);

++++//+and+restore+their+Objects,+as+I.E,+datepicker
++++$('#'+%2B+idElement+%2B+'+input[name*="Date"]').datepicker();

++++//+Remove+the+disabled+attribut+on+non-selected
++++$('#'+%2B+idElement+%2B+'+input[type="checkbox"]:not(:checked),+#'+%2B+idElement+%2B+'+input[type="radio"]:not(:checked)').prop('disabled',false);+
++++$('#'+%2B+idElement+%2B+'+select>option:not([selected])').prop('disabled',false);

++++//+Restore+mouse/keyboard+events+and+remove+readOnly+appearance+on+selected+ones
++++$('#'+%2B+idElement+%2B+'+input[type="checkbox"]:checked').prop('tabindex','').css('pointer-events','').css('opacity','');
++++$('#'+%2B+idElement+%2B+'+input[type="radio"]:checked').css('opacity','');
++++$('#'+%2B+idElement+%2B+'+select').css('background-color','');
}|1168045|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>|1168046|1168047|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|H|7|16|8|@]|9|@]|A|$I|J]]|$1|U|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

<p>A simple need : display non-editable form (that can become editable later on) with minimum code and headache.</p>
<p>If you can't use the 'disabled' attribut (as it erases the value's input at POST), and noticed that html attribut 'readonly' works only on textarea and some input(text, password, search, as far I've seen), and finally, if you don't want to bother with duplicating all your select, checkbox and radio with hidden input logics,
you might find the following function or any of his inner logics to your liking :</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>addReadOnlyToFormElements = function (idElement) {
    
        // textarea an input of type (text password search) work with the html readonly
        $('#' + idElement + ' textarea, #' + idElement + ' input').prop('readonly',true);
    
        // but you still have to destroy their associated objects, as I.E, datepicker (in our old project, datepicker is appended to input where 'Date' is in name attribut, don't ask why)
        $('#' + idElement + ' input[name*="Date"]').datepicker('destroy');
    
        // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
        $('#' + idElement + ' input[type="checkbox"]:not(:checked), #' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',true); 
        $('#' + idElement + ' select&gt;option:not([selected])').prop('disabled',true);
    
        // and, on the selected ones, to disable mouse/keyoard events and mimic readOnly appearance
        $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','-1').css('pointer-events','none').css('opacity','0.5');
        $('#' + idElement + ' input[type="radio"]:checked').css('opacity','0.5');
        $('#' + idElement + ' select').css('background-color','#eee');
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<p>And there's nothing easier than to remove these readonly</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>removeReadOnlyFromFormElements = function (idElement) {

    // just remove the html readonly on textarea and input
    $('#' + idElement + ' textarea, #' + idElement + ' input').prop('readonly',false);

    // and restore their Objects, as I.E, datepicker
    $('#' + idElement + ' input[name*="Date"]').datepicker();

    // Remove the disabled attribut on non-selected
    $('#' + idElement + ' input[type="checkbox"]:not(:checked), #' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',false); 
    $('#' + idElement + ' select&gt;option:not([selected])').prop('disabled',false);

    // Restore mouse/keyboard events and remove readOnly appearance on selected ones
    $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','').css('pointer-events','').css('opacity','');
    $('#' + idElement + ' input[type="radio"]:checked').css('opacity','');
    $('#' + idElement + ' select').css('background-color','');
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|953599|text|您可以在表单上添加html不可见层。例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953600|<div+class="coverContainer">
<form></form>
</div>|code-block|syntax|javascript|953601|和风格：|953602|.coverContainer{
++++width:+100%25;
++++height:+100%25;
++++z-index:+100;
++++background:+rgba(0,0,0,0);
++++position:+absolute;
}|953603|当然，用户可以在web浏览器中隐藏这一层。|953604|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You add html invisible layer over the form. For instance </p>

<pre><code>&lt;div class="coverContainer"&gt;
&lt;form&gt;&lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>and style:</p>

<pre><code>.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}
</code></pre>

<p>Ofcourse user can hide this layer in web browser.</p>


<p>I have two pages with HTML forms. The first page has a submission form, and the second page has an acknowledgement form. The first form offers a choice of many controls, while the second page displays the data from the submission form again with a confirmation message. On this second form all fields must be static.</p>

<p>From what I can see, some form controls can be <code>readonly</code> and all can be <code>disabled</code>, the difference being that you can still tab to a readonly field.</p>

<p>Rather than doing this field by field is there any way to mark the whole form as readonly/disabled/static such that the user can't alter any of the controls?</p>


How can I make an entire HTML form "readonly"?

我有两个带有HTML表单的页面。第一个页面有一个提交表单，第二个页面有一个确认表单。第一个表单提供了许多控件的选择，而第二个页面再次显示提交表单中的数据，并显示一条确认消息。在第二个表单中，所有字段都必须是静态的。在我看来，一些表单控件可以是readonly，所有的表单控件都可以是disabled，不同之处在于您仍然可以使用Tab键切换到只读字段。有没有办法将整个表单标记为只读/禁用/静态，这样用

问如何使整个HTML表单“只读”？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使整个HTML表单“只读”？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使整个HTML表单“只读”？
EN