Html 如何使输入字段只读但仍将数据发送回表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6241943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an input field read only but still have it send data back to a form?
提问by UCC
I have an input field:
我有一个输入字段：
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />
I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.
我希望该字段显示在我的表单上，但不希望用户能够编辑该字段。当用户单击提交时，我希望将表单值发送回服务器。
Is this possible. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.
这可能吗。我尝试不同的组合disabled = "disabled"，readonly = "readonly"。似乎我总是没有收到任何返回该领域的东西。
回答by Petah
Adding a hidden field with the same name will sends the data when the form is submitted.
添加同名隐藏字段将在提交表单时发送数据。
<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />
回答by David says reinstate Monica
On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" />which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" />to show the variable to the user. This won't submit the value, obviously, but willmake it visible (while the hiddeninput will submit the value, but not showthe value).
假设您使用脚本创建表单，我建议使用<input type="hidden" />which 将随表单提交变量，但也使用常规<input type="text" readonly="readonly" />向用户显示变量。显然，这不会提交值，但会使其可见（而hidden输入将提交值，但不显示值）。
You could also do this with JavaScript:
你也可以用 JavaScript 做到这一点：
var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++){
if(inputs[i].type == 'hidden'){
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.setAttribute('disabled');
newInput.value = inputs[i].value;
theForm.appendChild(newInput);
}
}
回答by 23Pstars
alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted
或者，您可以使用 javascript 进行一些操作，在提交表单之前删除禁用的属性
<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>
回答by OpenCV_fan
With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.
Windows 10 上的 Chrome 浏览器只有 name="your_name" 并且 readonly 属性工作正常：客户端无法更改值，但它会发送到服务器。
回答by Vasyl Petrov
<script type="text/javascript">
function myFn(event) {
event.stopPropagation(); event.preventDefault();
}
</script>
<input onkeydown="myFn(event)" >
回答by Ronith RN
You can add 'readonly'='true' in the input element. With this the user cant edit and also send the value back to the server.
您可以在输入元素中添加 'readonly'='true'。有了这个，用户不能编辑并将值发送回服务器。
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />
回答by DevelRoot
You should consider using input type="hidden"when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.
提交只读字段时，您应该考虑使用 input type="hidden"。否则，如果您仍然需要输入字段的值可见，您应该使用不同的名称创建另一个输入（type=text）。
<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />
