html - 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 不适用于输入字段。但它没有那个。

So change it as input {text-transform:capitalize;} it works fine. see demo

它在没有 !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/>