CSS尝试将输入框中的第一个字符变为大写

Question

我想把输入框里的第一个字符变成大写。

到目前为止，我已经尝试过以下方法:

input:first-letter {text-transform:capitalize !important}
input:first-letter {text-transform:uppercase !important}

我还尝试将输入字段设置为 display:block; 和 display:inline-block; 以使其有样式，但是都没有成功。

我正在使用最新版本的chrome。如果我查看检查器，我可以看到

input:first-letter {text-transform:capitalize !important} is flagged to be active but it does not work.

我也可以接受任何Jquery解决方案。

谢谢，

- user2722667

---

使用CSS样式对字段进行美化并不会改变实际提交表单时的内容。因此，如果用户输入了“foo”，并且使用text-transform:capitalize样式使其看起来像“Foo”，则在提交表单时，表单仍将向服务器发送“foo”。 - andi

如果您只想将一组单词中的第一个单词的第一个字母大写，那么仅使用CSS是无法实现的。 - Drew Kennedy

@andi 这只是纯粹的视觉效果。 - user2722667

可能是CSS将句子的第一个字母大写的重复问题。 - Drew Kennedy

好的，只是想确保你知道。 - andi

Answer 1

:first-letter在输入字段上不起作用，但在没有输入字段的情况下可以正常工作。

所以将其更改为input {text-transform:capitalize;}就可以正常工作了。请查看演示。

没有!important也可以正常工作。

input {text-transform:capitalize;}

<input/>

正如您在纯CSS中提到的那样，我已添加了上述方法。

限制：它会将输入框中的所有单词都大写。目前在纯CSS中不可能仅将第一个单词大写。您可以尝试以下给定的jQuery方法来实现此目的。

使用jQuery：

使用 keyup 事件

$('input').keyup(function(){
    if($(this).val().length>0){
      var character = $(this).val().charAt(0);
      if(character!=character.toUpperCase()){
          $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().substr(1));
       }
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

即使在鼠标事件上也可以工作：（例如使用鼠标剪切粘贴）

通过$('input').bind('input propertychange', function() {使用propertychange事件。

$('input').bind('input propertychange', function() {
    if($(this).val().length>0){
      var character = $(this).val().charAt(0);
      if(character!=character.toUpperCase()){
          $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().substr(1));
       }
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

- jafarbtech

---

将所有单词都大写，而不仅仅是第一个字母。 - Gabriele Petrioli

这会将每个单词的首字母大写。不确定这是否是 OP 想要的。 - andi

GabyakaG.Petrioli和@andi这是真的。但我们没有纯CSS的解决方案。只看CSS标签列表。那就是为什么会这样。现在我已经更新了情景。 - jafarbtech

这几乎可以工作。但是，如果您输入一个单词并按下（cmd + a）复制文本，则复制函数将无法正常工作 - 至少在Mac上。 - user2722667

没事了，这个可以用：if ($(this).val().length == 1) { $(this).val($(this).val().charAt(0).toUpperCase() + $(this).val().substr(1)); } 我不得不修改你的注释行。 - user2722667

@user2722667 我已更新答案，以处理其他键（cmd + a），并使用鼠标事件进行复制和粘贴。 - jafarbtech

Answer 2

你可以使用一个onKeypress监听器，并将值的第一个字符大写。请记住，每次在该input中按键时，此函数都会运行。

$( "#keypress" ).keypress(function() {
  var val = $(this).val();
  val = val.substr(0, 1).toUpperCase() + val.substr(1);
  $(this).val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="keypress">

- Logan H

Answer 3

对于文本输出，您可以通过 CSS 轻松地使第一个字符大写。

.mytable td {
    text-transform:lowercase;
}
.mytable td:first-letter {
    text-transform:uppercase;
}

- Vincent