如何通过css在输入框中应用Title Case [英] How to apply Title Case in input box through css

问题描述

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

I am using text-transform property to convert inputbox text into Title Case, But I am not getting the exact property or combination to do this.

我也尝试过

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

我正在尝试自动转换这些

I am trying to auto conversion for these

nIklesh raut : Niklesh Raut

NIKLESH RAUT : Niklesh Raut

或者我应该使用Javascript。

Or should I go with Javascript.

推荐答案

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

You can do like following way using css. This will work for all word.

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。

Note: But this will work when user will type in small letter only. But, it will be useful to you to go further. To make it for all i think you should use Scripting.

工作小提琴

Working Fiddle

这篇关于如何通过css在输入框中应用Title Case的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！