当前位置：首页 > 行业动态 > 正文

如何在HTML中调整文本框的大小写？

admin
行业动态
2024-10-30
2289

在HTML中，可以使用CSS的 text-transform属性来调整文本框内文本的大小写。

在HTML中，文本框的大小写调整通常需要结合CSS和JavaScript来实现，以下是一些常见的方法和示例代码：

如何在HTML中调整文本框的大小写？第1张

使用CSS控制大小写样式

CSS可以用于设置文本的默认显示样式，但无法直接改变用户输入的大小写，不过，可以使用text-transform 属性来控制文本框内文本的显示方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <form>
        <label for="input1">Uppercase:</label>
        <input type="text" id="input1" ><br><br>
        
        <label for="input2">Lowercase:</label>
        <input type="text" id="input2" ><br><br>
        
        <label for="input3">Capitalize:</label>
        <input type="text" id="input3" ><br><br>
    </form>
</body>
</html>

使用JavaScript动态调整大小写

JavaScript可以用来实时监听用户的输入，并根据需要转换文本的大小写，以下是一个示例，展示了如何使用JavaScript实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #output {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form>
        <label for="input1">Toggle Case:</label>
        <input type="text" id="input1"><br><br>
        <div id="output"></div>
    </form>
    <script>
        document.getElementById('input1').addEventListener('input', function() {
            const input = this.value;
            const output = document.getElementById('output');
            output.innerText = input.split('').map(char => {
                if (char === char.toUpperCase()) {
                    return char.toLowerCase();
                } else {
                    return char.toUpperCase();
                }
            }).join('');
        });
    </script>
</body>
</html>