关于javascript：如何通过css在输入框中应用Title Case

How to apply Title Case in input box through css

我正在使用文本转换属性将输入框文本转换为标题大小写，但我没有获得执行此操作的确切属性或组合。

我也试过了

1 2	text-transform: capitalize; text-transform: lowercase;

我正在尝试自动转换这些

1
2
3

nIklesh raut : Niklesh Raut

NIKLESH RAUT : Niklesh Raut

号

或者我应该使用javascript。

相关讨论

您可以使用CSS执行以下操作。这对所有人都有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
}

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

号

注意：但当用户只输入小写字母时，这将起作用。但是，如果你能走得更远，这将是很有用的。为了做到这一点，我认为您应该使用脚本。

工作小提琴

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

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13

nIklesh raut


NIKLESH RAUT


niklesh RAUT


p {
text-transform: capitalize;
}

输出为：

尼古拉斯·劳特

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

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

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

编辑

规范实际说明如下：

capitalize

Puts the first character of each word in uppercase; other characters are unaffected.

号

https://www.w3.org/wiki/css/properties/text-transform

1
2
3
4
5
6
7

text-align: center;
font-family: 'Signika', sans-serif;
line-height: 60px;
font-size: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;

使用类似的东西。

如果使用javascript，这将解决您的问题。

1 2	var str ="nIklesh raut"; str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

。

参考：如何将每个单词的第一个字母大写，比如两个单词的city？

提示：请检查重置CSS样式表以获取文本转换的任何覆盖

文本转换属性-定义和用法

文本转换属性控制文本的大小写。

默认值：无

继承：是的

版本：CSS1

javascript语法：object.style.textform="大写"

所有浏览器都完全支持该属性。

CSS语法

1
2
3

。

属性值

无-无大写。文本按原样呈现。这是默认值

大写-将每个单词的第一个字符转换为大写

大写-将所有字符转换为大写

小写-将所有字符转换为小写

初始-将此属性设置为其默认值。

继承-从其父元素继承此属性。

测试工作文件：

https://jsfiddle.net/tfn2k46n/