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解决方案

谢谢，

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/>

甚至在鼠标事件上也可以工作：-（如鼠标中的剪切粘贴）

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

$('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/>