在输入元素上使用 text-transform 实际上会转换文本？ [关闭]
Posted
技术标签:
【中文标题】在输入元素上使用 text-transform 实际上会转换文本？ [关闭]【英文标题】：Using text-transform on an input element actually transforms the text? [closed] 【发布时间】：2011-01-22 15:40:07 【问题描述】：考虑到 text-transform 是一个 CSS 属性，我不明白输入字段中 text-transform 设置为大写的文本实际上是如何在提交表单时将大写文本发布到页面的。 CSS不应该只是修改页面的外观而不是内容本身吗？如果我在表单中输入小写的内容，它不应该以小写形式提交并在表单字段中以大写形式出现吗？
我正在使用 php 来处理 post 变量，并且我键入的任何文本转换设置为大写的文本实际上都是大写的。我修改了一个小写的值，字符串“这是一个测试”。例如......如果我删除测试并在输入字段中重新输入并提交它，然后打印提交的值，它将打印出“这是一个测试”。重新键入的文本为大写，任何原始文本的大小写与以前相同。这只是故障行为还是什么？
【问题讨论】：
这很有趣。以前从未尝试过。您是否在多个浏览器上尝试过此操作？可能是特定于浏览器的。 【参考方案1】：测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
textarea, input
text-transform: uppercase;
--></style>
</head>
<body>
<?
if( !empty($_POST) )
echo '<pre>' . htmlspecialchars(print_r($_POST, TRUE)) . '</pre>';
?>
<form action="" method="post">
<textarea name="textarea" rows="3" cols="40">Default</textarea>
<input name="text" value="Default">
<input type="submit">
</form>
</body>
</html>
有趣的发现：
Opera 10 在 textareas 中忽略text-transform: uppercase
Chrome 4 为 POST 表单发送 GET 请求
我测试过的所有浏览器 (Windows XP) 都没有您描述的行为：Firefox 3.6、IE 6、IE7、IE8、Opera 10...
恕我直言，您很有可能正在使用 javascript...
【讨论】：
我在重新创建场景时也遇到了问题。我确实记得必须手动修改一堆文件，这些文件已经使用输入或 textarea 字段将文本转换设置为大写，其中一些甚至没有被我编辑。也许我只是在某个地方有一个脚本干扰它，现在已经不存在了......【参考方案2】：好吧，如果所有主要浏览器都确实转换了字段内容，那么您的关注只是哲学上的兴趣。有人可能会争辩说，对于输入字段（例如，与 <h1> 元素相反），用户输入的文本在屏幕上的外观与实际提交的内容不同会非常不友好和令人困惑。
edit 现在测试浏览器...
Windows 上的 Chrome 4 以视觉方式应用样式，但提交的文本没有更改 Windows 上的 Firefox 3.6 以视觉方式应用样式，但提交的文本没有更改 IE8 视觉上应用了样式，但提交的文本没有改变因此，我开始想知道是什么让您认为发布的字段内容是由 CSS 规则转换的。
【讨论】：
以上是关于在输入元素上使用 text-transform 实际上会转换文本？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
当我们使用 text-transform: 大写时，为啥 IE7 要求 EOT 字体包含小写字形？
有没有相当于 CSS text-transform: capitalize 的 JS？