jQuery控制文本的大小写。

在上一篇随笔中小颖分享了用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>

来看看效果吧:

posted @ 2016-09-01 21:36  爱喝酸奶的吃货  阅读(945)  评论(4)  编辑  收藏  举报