纯CSS实现输入框字符自动转为小写或大写
作者:admin 时间:2021-5-25 15:9:31 浏览:对于输入框的字符，如果要求只能输入小写或大写，怎么处理？js实现？提交到后台程序转换？其实很简单，CSS就有这个功能，一条语句就搞定。
纯CSS实现输入框字符自动转为小写或大写
CSS
.lowercase{
text-transform: lowercase;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
解释：text-transform 属性控制文本的大小写。这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。lowercase 定义字母为小写，uppercase 定义字母为大写，如果值为 capitalize，则要对首字母大写。
HTML
<input type="text" class="lowercase">
<input type="text" class="uppercase">
<input type="text" class="capitalize">
解释：input标签使用class的值来控制文本大小写。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS实现输入框字符自动转为小写或大写</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<style type="text/css">
.lowercase{
text-transform: lowercase;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header text-center">转换输入框字符</h1>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="form-group">
<label for="lowercase">小写</label>
<input type="text" id="lowercase" class="lowercase form-control">
</div>
<div class="form-group">
<label for="uppercase">大写</label>
<input type="text" id="uppercase" class="uppercase form-control">
</div>
<div class="form-group">
<label for="capitalize">首字母大写</label>
<input type="text" id="capitalize" class="capitalize form-control">
</div>
</div>
</div>
</div>
</body>
</html>
解释：bootstrap.css不是必须文件，它只是本案例用到的布局设计样式文件。
标签: css css3 text-transform
- 站长推荐
