Css试图使输入字段中的第一个字符大写答案

【问题标题】：Css trying to make first character in input field uppercaseCss试图使输入字段中的第一个字符大写
【发布时间】：2016-12-02 20:45:07
【问题描述】：

我正在尝试将输入字段中的第一个字符设为大写。

到目前为止我已经尝试过：

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 解决方案持开放态度

谢谢，

【问题讨论】：

使用 CSS 对字段进行样式设置不会改变表单实际提交的内容。因此，如果用户输入“foo”并使用text-transform:capitalize 设置样式以使其看起来像“Foo”，则在提交表单时表单仍将“foo”发送到服务器。
如果您只是在要大写的单词集合中查找第一个单词的第一个字母，那么仅使用 css 是无法完成的。
@andi 这只是纯粹的视觉效果
Capitalize first letter of sentences CSS的可能重复
好的，只是想确定你知道。

标签： html css input

【解决方案1】：

:first-letter 不会在输入字段上工作。但没有它它就可以工作。

所以把它改成input {text-transform:capitalize;} 就可以了。看演示

没有!important也可以正常工作

input {text-transform:capitalize;}

&lt;input/&gt;

正如您在纯 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/>

【讨论】：

将所有单词大写，而不仅仅是第一个字母
这会将每个单词的第一个字母大写。不确定这是否是 OP 想要的。
GabyakaG.Petrioli & @andi 没错。但我们没有纯 CSS 的解决方案。请参阅标签列表仅 css。这就是为什么给定的。现在我已经更新了场景
这几乎可以工作。但是，如果您输入一个单词并按 (cmd + a) 复制文本，则复制功能将不起作用 - 至少在 mac 上
Nvm 这行得通：if ($(this).val().length == 1) { $(this).val($(this).val().charAt(0).toUpperCase() + $(this).val().substr(1)); } 我不得不更改您的评论行

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

【讨论】：