技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS实现输入框字符自动转为小写或大写

作者:admin    时间:2021-5-25 15:9:31    浏览:

对于输入框的字符,如果要求只能输入小写或大写,怎么处理?js实现?提交到后台程序转换?其实很简单,CSS就有这个功能,一条语句就搞定。

纯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>

execcodegetcode

解释:bootstrap.css不是必须文件,它只是本案例用到的布局设计样式文件。

标签: css  css3  text-transform  
x
x
  • 站长推荐