Question

我已经编写了这段代码来大写句子中每个单词的第一个字母而不使用javascript。只是HTML和CSS。但它似乎没有工作。请帮助我解决这个问题。第一个代码只是一个有效的演示。但第二个代码实际上是我想在我的作业中提交的内容，请帮助我解决问题。

代码1：

<html>
<head>

    <input type="text" size="60%" style="text-transform:capitalize">

</head>
</html>

代码2：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

    <style>
        h2{
            color:#0F0;
            font-size:large;
            font-weight:bold;
            font-family:"Comic Sans MS", cursive
        }

        p{
            color:#0F0;
            font-size:large;
            font-family:"Comic Sans MS", cursive
        }

        y{
            text-transform:capitalize;  
        }

    </style>


    <script language="javascript">

    function myFunction(){
        var a  = document.getElementById("input").value;
        document.getElementById("output").value = a;
    }

    </script>

</head>

<body>
<h1>Question 5</h1>
<center>

    <form name=frm1>

        <table border="2" cellpadding="8" cellspacing="5" style="background-color: blue"  width="50%">
            <tr>
                <td align="center" colspan="2"><h2>Capitalize First Letter Of Each Word</h2></td>
            </tr>

            <tr>
                <td><p>Enter Text Here:</p></td>

                <td> <x> <input type="text" id="input" placeholder="text here" size="65%"> </x> </td>
            </tr>

            <tr>
                <td align="center" colspan="2"> <y> <input type="text" id="output" placeholder="Output" size="100%" readonly> </y> </td>
            </tr>
        </table>    

        <input type="button" value="click me" onClick="myFunction()">
    </form>

</center>
</body>
</html>

Answer 1

请使用以下作为参考。

<input  type="text" style="text-transform:uppercase">

Answer 2

您编写的代码问题似乎与您正在使用：

y { text-transform: capitalize; }

如果您改为使用#output元素定位，它可以正常工作（请参阅此小提琴：http://jsfiddle.net/mifi79/A3Kqr/）。

#output { text-transform: capitalize; }

我会让所有表格和奇怪的非语义元素（，等等）滑动，因为你显然是在课堂上学习; - ）

Answer 3

那么为什么不使用已经有效的方法呢？将第二个文本框代码更改为此

<input type="text" id="output" placeholder="Output" size="100%" readonly style="text-transform:capitalize">

否则，如果你真的想使用内部样式表，那么你可以使用id Selector。 y不是html元素，因此您不能将其用作元素选择器。最好使用id Selector作为

    #output{
        text-transform:capitalize;  
    }

由于输出是您的文本框的ID，它将起作用。

Answer 4

您可以这样做：

var a  = document.getElementById("input").value;
document.getElementById("output").value = a;
document.getElementById("output").style.textTransform = "capitalize";

Here is a fiddle

在没有javascript的情况下将每个字母大写

4 个答案: