如何通过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" />

注意：但是当用户只输入小写字母时这会起作用。但是，这对你走得更远会有用。为了让所有人都满意，我认为您应该使用脚本。

Working Fiddle

Answer 2

CSS 只会影响文本中的文本样式，不会更改文本框的基础值。这意味着当您通过 JavaScript 访问值时，或者如果您 POST 将它发送到您的服务器，该值将是输入时的值，而不是转换为大写。您需要自己使用 JS 或您的服务器端语言来完成此操作。

Answer 3

我曾经遇到过类似的问题。 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 做到这一点。最好的选择是让服务器 return 为小写字符串，这样文本转换的行为就会一致。但是请注意，这对于名称也是有问题的。例如。 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

Answer 4

如果您选择 javascript，这将解决您的问题

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

参考：How to capitalize first letter of each word, like a 2-word city?

Answer 5

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

使用类似这样的东西。

Answer 6

提示：请检查重置 css 样式 sheet 是否有任何覆盖 text-transform

text-transform 属性 - 定义和用法

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

默认值： none

继承：是

版本： CSS1

JavaScript 语法： object.style.textTransform="uppercase"

所有浏览器完全支持属性.

CSS 语法

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
// For DOM 
document.getElementById("myP").style.textTransform = "capitalize";

属性值

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

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

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

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

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

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

测试工作文件：

https://jsfiddle.net/tfn2k46n/

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

How to apply Title Case in input box through css

javascript

css

textbox

编辑