Question

我发现用css text-transform:capitalize大写的大写字母在被javascript捕获时没有大写。我想知道解决这个问题的最简单方法是什么？

演示如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<input id="box" type="text" style="text-transform:capitalize">
<button id="showinput">type in something then press me</button>
</html>

<script>
$("#showinput").click(function(){
txt=$("#box").val();
alert(txt+"   as you can see, the first letter of each word is not capitalized!");
})
</script>

Answer 1

CSS text-transform属性仅转换用户在屏幕上看到的内容（与所有CSS属性一样）。它不与您的JavaScript代码交互。我建议在JavaScript中对字符串应用类似的函数，例如来自lodash的_.upperCase。

Answer 2

正如McMath所说，CSS文本转换不会与Javascript交互。这是一个解决方案，通过大写Javascript中的第一个字母来提供您想要的结果：

＆＃13;

$("#showinput").click(function(){
  txt = $("#box").val();
  txt = txt.charAt(0).toUpperCase() + txt.slice(1);
  alert(txt+"   as you can see, the first letter of each word is capitalized!");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
  <input id="box" type="text" style="text-transform:capitalize">
  <button id="showinput">type in something then press me</button>
</html>

＆＃13;

来源：How do I make the first letter of a string uppercase in JavaScript?

Answer 3

使用正则表达式在你的js中执行此操作

＆＃13;

    $("#showinput").click(function(){
    txt=$("#box").val();
    txt = txt.trim().replace(/\b\w{3,}/g, function (l) {
      return l.charAt(0).toUpperCase() + l.slice(1);
    });

    alert(txt+"   as you can see, the first letter of each word is not capitalized!");
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <input id="box" type="text" style="text-transform:capitalize">
    <button id="showinput">type in something then press me</button>
    </html>

＆＃13;

测试用例：Hello World

注意这也处理输入文本之间有空格的情况，样式text-transform:capitalize处理大写每个单词的情况。

Answer 4

<强> FIDDLE

<强> SCRIPT

$("#showinput").click(function(){
txt=$("#box").val();
var newtxt=txt.split(" ");
var tmp=[];
for(i=0;i<newtxt.length;i++)
{
    tmp.push(newtxt[i].trim().charAt(0).toUpperCase()+ newtxt[i].slice(1));

}
//alert(tmp.join(" "));//YOU CAN USE THIS ALSO
alert(tmp.join().replace(","," ")+"   as you can see, the first letter of each word is not capitalized!");//YOU CAN USE tmp.join(" ") also
})

<强>描述

我试过的是，首先得到由space分割的数组中的每个单词。然后转换每个单词的第一个字母，同时修剪任何空格，然后将其与其余单词连接，并将其全部放入数组中。

然后使用.join()加入数组，然后将,替换为space。我希望这会对你有所帮助。

请参阅小提琴演示，其工作正如您所说。

如何捕获由css大写的大写输入字母：text-transform：capitalize

4 个答案: