Question

在我的HTML页面中，我将initial属性的文本框样式设置为text-transform，但不使用initial。我还测试了uppercase，lowercase，capitalize等其他值，但initial没有变化。我希望当用户在文本框中输入文本时，文本应输入首字母大写并保留为他/她输入的内容。

<!DOCTYPE html>
<html>
<head>
<style>

::-webkit-input-placeholder {
   text-transform: initial;

}

:-moz-placeholder { 
   text-transform: initial;
}

::-moz-placeholder {  
   text-transform: initial;
}

:-ms-input-placeholder { 
   text-transform: initial;
}
input{
   text-transform: initial;
}
</style>
</head>
<body>
<input type="text" placeholder="text" />
</body>
</html>

也试过

<html>
<head>
<style>
input:first-letter {
    text-transform: uppercase;
}
</style>
</head>
<body>

<input type='text' >

</body>
</html>

没有运气。

Answer 1

您似乎认为text-transform: initial表示＆＃34;初始上限＆＃34;或＆＃34;仅将第一个字母＆＃34;大写。这不是initial的含义。 initial是一个CSS范围的关键字，表示＆＃34;此属性的初始值＆＃34;。它与text-transform无关。

text-transform的初始值为none。因此text-transform: initial与text-transform: none具有相同的效果。

text-transform没有值意味着＆＃34;初始上限＆＃34;。通常对于未替换的元素，您会apply the text transform to ::first-letter，但由于您在这里处理input元素，我不确定是否有纯CSS中的解决方案。

此外，将文本转换应用于表单字段首先是一个糟糕的想法，特别是如果字段区分大小写。如果我是你，我根本不会这样做。

Answer 2

这将是css

 input{
          text-transform: capitalize;
    }

Answer 3

你可以在一个函数内执行此操作：例如：

$(document).ready(function() {    
    $('input').on('keypress', function(event) {
        var $this = $(this),
        val = $this.val();
        val = val.charAt(0).toUpperCase() + val.substr(1);
        $this.val(val);
   });
});

这将为您提供所需的输出。希望这会有所帮助：）

在html文本转换属性中，在文本框中不使用initial

3 个答案: