如何通过css在输入框中应用Title Case

Question

我正在使用text-transform属性将输入框文本转换为标题大小写,但我没有得到确切的属性或组合来执行此操作.

我也试过了

text-transform: capitalize;
text-transform: lowercase;

我正在尝试自动转换这些

nIklesh raut : Niklesh Raut

NIKLESH RAUT : Niklesh Raut

或者我应该使用Javascript.

Answer 1

您可以使用css执行以下方式.这适用于所有单词.

input { 
  text-transform: capitalize;
}
::-webkit-input-placeholder { 
    text-transform: none;
}
:-moz-placeholder { 
    text-transform: none;
}
::-moz-placeholder { 
    text-transform: none;
}
:-ms-input-placeholder { 
    text-transform: none;
}

<input type="text" placeholder="test" />

注意:但是当用户仅键入小写字母时,这将起作用.但是,你走得更远是有用的.为了实现这一切,我认为你应该使用Scripting.

工作小提琴

Answer 2

我有一次类似的问题.text-transform: capitalise只会将单词的第一个字母大写.其他信件不会受到影响.

例如:

<p>nIklesh raut</p>
<p>NIKLESH RAUT</p>
<p>niklesh RAUT</p>

p {
  text-transform: capitalize;
}

输出为:

NIklesh Raut

NIKLESH RAUT

Niklesh RAUT

http://codepen.io/jaycrisp/pen/YwjyME

我尝试了很多东西,发现单独使用CSS无法做到这一点.最好的选择是让服务器返回一个小写字符串,然后文本转换将表现一致.但请注意,这对于名称也存在问题.例如,Leo McGarry将被格式化为Leo Mcgarry.

如果您没有后端访问权限,则需要先在javascript中转换为小写字符串.

编辑

该规范实际上说明如下:

利用

将每个单词的第一个字符设为大写; 其他角色不受影响.

https://www.w3.org/wiki/CSS/Properties/text-transform