Question

考虑到text-transform是一个CSS属性，我不明白输入字段中文本转换设置为大写的文本实际上是如何在提交表单时将大写文本发布到页面。是不是CSS应该修改页面的外观而不是内容本身？如果我在表单中输入小写字母，不应该以小写字母提交，只是在表单字段中以大写字母显示？

我正在使用PHP来处理post变量，我用text-transform设置为大写的任何文本实际上都是大写的。我修改了一个小写的值，字符串'This is a test'。例如...如果我删除测试并在输入字段中重新输入并提交它，然后打印提交的值，它将打印出“这是测试”。使用大写的重新输入文本和与之前相同的任何原始文本。这只是一个小故障行为还是什么？

Answer 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 ......

Answer 2

好吧，如果所有主流浏览器确实真正转换了字段内容，那么您的关注只是哲学上的兴趣。有人可能会争辩说，对于输入字段（相对于<h1>元素而言），用户输入文本的屏幕外观与实际提交的不同将是非常不友好的混乱。

编辑现在测试浏览器......

Windows上的Chrome 4会直观地应用样式，但提交的文本不会更改
Windows上的Firefox 3.6直观地应用样式，但提交的文本未更改
IE8在视觉上应用样式，但提交的文本未更改

因此，我开始想知道是什么让你认为发布的字段内容是由CSS规则转换的。

在输入元素上使用文本转换实际上会转换文本？

2 个答案: