标签：
在上一篇随笔中小颖分享了用CSS的text-transform 属性控制文本的大小写,今天小颖再给大家分享一段用jQuery实现控制文本的大小写,由于小颖已经好久没写过jQuery了,如果有什么不对的地方希望大家告诉小颖哦,小颖加以改正,好啦废话不多说啦,下面大家请看小颖写的代码: ~~~~~当当当当
html代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="/jquery/css/js/jquery-2.1.3.min.js"></script> <title>css text-transform</title> <script type="text/javascript"> jQuery(function(){ $(".first-big-letter").keyup(function(){ if($(this).val().length>0){ let firBigL=$(this).val(); let headerArry=[]; for(var i=0;i<firBigL.length;i++){ headerArry[i]=firBigL.substring(i,(i+1)); } firBigL=‘‘; headerArry[0]=headerArry[0].toUpperCase(); for(var i=0;i<headerArry.length;i++){ firBigL+=headerArry[i]; } console.log(firBigL); $(this).val(firBigL); console.log($(this).val()); } }); $(".big-letter").keyup(function(){ if($(this).val().length>0){ let secBigL=$(this).val(); secBigL=secBigL.toUpperCase(); $(this).val(secBigL); } }); $(".small-letter").keyup(function(){ if($(this).val().length>0){ let thirdBigL=$(this).val(); thirdBigL=thirdBigL.toLowerCase(); console.log(thirdBigL); $(this).val(thirdBigL); } }); }); </script> </head> <body> <div class="header"> <div class="header-big-letter"> <label>首字母大写:</label> <input type="text" class="first-big-letter"> </div> <div class="all-big-letter"> <label>只能输入大写字母:</label> <input type="text" class="big-letter"> </div> <div class="all-small-letter"> <label>只能输入小写字母:</label> <input type="text" class="small-letter"> </div> </div> </body > </html>
css:
<style> .header{ width:400px; height:400px; margin-left:400px; background-color:pink } .header-big-letter{ padding-top:50px; padding-bottom:20px; } /*.first-big-letter{ text-transform:capitalize; }*/ .all-big-letter{ padding-bottom:20px; } /*.big-letter{ text-transform:uppercase; }*/ .all-small-letter{ padding-bottom:20px; } /*.small-letter{ text-transform:lowercase; }*/ </style>
来看看效果吧:
标签：
原文地址：http://www.cnblogs.com/yingzi1028/p/5831442.html
