Question

所以，如果我有代码

.rsform-input-box {text-transform: uppercase;}

在特定于我们底部的表单字段的网站http://www.thediabetesnetwork.com上，您会在键入时看到转换为大写，但是在您输入数据的情况下导出数据。例如，如果我键入Shane ，它直观地显示了SHANE。提交后，它将在数据库中恢复为Shane（之前的某个时刻）。

我的问题是为什么会这样做以及围绕选项的工作是什么？我的另一个选择是

 function toUpCase()
{
document.getElementById("first").value=document.getElementById("first").value.toUpperCase();
document.getElementById("last").value=document.getElementById("last").value.toUpperCase();
document.getElementById("email").value=document.getElementById("email").value.toUpperCase();
}

Answer 1

CSS仅适用于演示文稿的内容。因此，它不会更改用户输入的值，也不会更改表单提交给数据库的值。

如果您的业务要求是仅接受数据库中的所有大写值，则最好在后端处理此问题。例如：$input = strtoupper($input);如果使用PHP。在后端执行此操作将确保即使用户已关闭JavaScript也会进行处理。

对于低安全性要求，您通过JavaScript处理它的想法应该有效;在提交表单之前，只需触发toUpCase功能。

从可用性的角度来看 - 担心数据库的内容并不是用户的工作;他们可能不需要知道。但是，如果您在每次使用这些数据点时强制执行正确的案例，那么您将使他们的生活更轻松 - 例如，在登录时。

Answer 2

以为我会添加这个答案，如果您希望通过CSS呈现内容，innerText将会执行此操作。见这个例子：

这是一个正在运行的例子：

(function() {
  document.getElementById('output').innerHTML = document.getElementById('text-selector').innerText;
}());

.uppercase {
  text-transform: uppercase;
}

div {
  margin-bottom: 20px;
}

<label>Input:</label>
<div class="container uppercase">
  <div>Here is some text.</div>
  <div id="text-selector">This is the text that will be be selected.</div>

</div>

<label>Output:</label>
<div class="container">
  <div>Here is some text.</div>
  <div id="output"></div>
</div>

规格：https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute

为什么CSS中的文本转换在表单中提交时不保持转换（大写）？

2 个答案: