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

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

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

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

Css尝试在输入字段大写中创建第一个字符

2 个答案: