技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS實(shí)現(xiàn)輸入框字符自動轉(zhuǎn)為小寫或大寫

作者:admin    時間:2021-5-25 15:9:31    瀏覽:

對于輸入框的字符，如果要求只能輸入小寫或大寫，怎么處理？js實(shí)現(xiàn)？提交到后臺程序轉(zhuǎn)換？其實(shí)很簡單，CSS就有這個功能，一條語句就搞定。

純CSS實(shí)現(xiàn)輸入框字符自動轉(zhuǎn)為小寫或大寫
純CSS實(shí)現(xiàn)輸入框字符自動轉(zhuǎn)為小寫或大寫

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標(biāo)簽使用class的值來控制文本大小寫。

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>純CSS實(shí)現(xiàn)輸入框字符自動轉(zhuǎn)為小寫或大寫</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">轉(zhuǎn)換輸入框字符</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不是必須文件，它只是本案例用到的布局設(shè)計(jì)樣式文件。

標(biāo)簽: css  css3  text-transform  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */