javascript网页特效——文本输入框和下拉菜单特效

学习记录 专栏收录该内容
37 篇文章 0 订阅

实例一:让文本框只带有下划线

<script type="text/javascript">                     
    function changeTextStyle(){             //让文本框只带有下划线
        //获得文本框的DOM
        var myText = document.getElementById("myText");                      
        myText.style.borderColor = 'black';     //设置边框颜色
        myText.style.borderStyle = 'solid';     //设置边框样式为实线
        myText.style.borderWidth = '0 0 1px 0'; //设置边框大小,0代表无
    }
</script>

实例二:首字母或全部字母大写

<script type="text/javascript">         
            //格式校验
            function validateInput(){
                //获得文本框的DOM
                var myText1 = document.getElementById("myText1");
                var myText2 = document.getElementById("myText2");
                var val1 = myText1.value;           //文本框1的值
                var val2 = myText2.value;           //文本框2的值
                var errMsg = '';                    //定义错误提示字符
                //判断是否以大写字母开头
                if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){
                    //拼接错误字符
                    errMsg = '文本框1的首字母需要大写\n';
                    alert(errMsg);
                }
                if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){
                    //拼接错误字符
                    errMsg = '文本框2的需要全部为大写字母\n';
                    alert(errMsg);
                }
            }
</script>

实例三:只能输入数字的文本框

<script type="text/javascript">         
            //格式校验
            function validateInput(){
                //获得文本框的DOM
                var myText = document.getElementById("myText");
                var val = myText.value;         //获取用户输入的值
                if(!/\b[0-9]+\b/.test(val)){        //使用正则校验
                    alert('只能输入数字');            //提示错误信息
                }
            }
</script>

实例四:用正则表达式验证Email格式

<script type="text/javascript">         
            //格式校验
            function validateInput(){
                //获得文本框的DOM
                var myText = document.getElementById("myText");
                var email = myText.value;   //获得用户输入的Email
                //定义正则表达式
                var emailReg 
                    = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if(emailReg.test(email)){   //判断是否符合格式要求
                    alert("校验通过,允许提交");     //通过
                }else{
                    alert("校验失败,请检查重新输入");  //验证失败
                }
            }
</script>

实例五:成为焦点时清除文本框内容

<script type="text/javascript">         
            //清楚内容
            function clearContent(myText){
                myText.value = '';      //把文本内容的值设为空字符
            }
</script>


<input type="text" value="" onfocus="clearContent(this)"/>

实例六:用户输入完以后立刻进行格式校验

<script type="text/javascript">                     
    function validateTel(){             //格式校验
        //获得文本框的DOM
        var myTel = document.getElementById("myTel");
        var val = myTel.value;          //获取用户输入的值
        if(!/\b[0-9]+\b/.test(val)){            //使用正则校验
            alert('只能输入数字');            //提示错误信息
            //修改样式,引起注意
            myTel.style.border = '1px solid red';
        }else if(val.length != 11){         //长度必须是11位
            alert('手机号码是11位');      //提示错误信息
            //修改样式,引起注意
            myTel.style.border = '1px solid red';
        }else{
            //修改样式,表示通过了
            myTel.style.border = '1px solid green';
            return true;
        }
    }
</script>


<input type="text" value="" id="myTel" onblur="validateTel()"/>

实例七:联动的省市下拉菜单

onchange 事件会在域的内容改变时发生。

<script type="text/javascript">         
            var arr = new Array();              //数据数组
            //定义数据,结构为:id、名字、父id
            arr[arr.length] = [1, '北京市', null];
            arr[arr.length] = [2, '四川省', null];
            arr[arr.length] = [3, '广东省', null];
            arr[arr.length] = [4, '北京市', 1];
            arr[arr.length] = [5, '成都市', 2];
            arr[arr.length] = [6, '广州市', 3];
            arr[arr.length] = [7, '深圳市', 3];
            //动态设置下拉项目
            function fillOptions(type){
                if(type == 'province'){
                    //获取省份下拉菜单的DOM
                    var province = document.getElementById("province");
                    province.innerHTML = '';        //内容先置空
                    //填充省的字符
                    var proStr = '<option value=""></option>';
                    //遍历数组
                    for(var i=0; i<arr.length; i++){
                        var item = arr[i];      //当前项
                        //如果没有父id,则是省份
                        if(item[2] == null)
                            proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
                    }
                    province.innerHTML = proStr;//填充新内容
                }else if(type == 'city'){
                    //获取当前的省份的id
                    var currProId = document.getElementById("province").value;
                    if(currProId == '')
                        return false;
                    //获取城市下拉菜单的DOM
                    var city = document.getElementById("city");
                    city.innerHTML = '';            //内容先置空
                    //填充市的字符
                    var cityStr = '<option value=""></option>';
                    //遍历数组
                    for(var i=0; i<arr.length; i++){
                        var item = arr[i];      //当前项
                        //判断是否为当前省下的城市
                        if(item[2] == currProId)
                            cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
                    }
                    city.innerHTML = cityStr        ;//填充新内容
                }
            }
        </script>

<body style="text-align:center;" onload="fillOptions('province');">
        <!-- 定义下拉菜单 -->
        省:<select id="province" onchange="fillOptions('city')"></select><br/><br/>
        市:<select id="city"></select><br/><br/>
    </body>

实例八:三级联动的省市县下拉菜单

<script type="text/javascript">         
            var arr = new Array();              //数据数组
            //定义数据,结构为:id、名字、父id
            arr[arr.length] = [1, '北京市', null];
            arr[arr.length] = [2, '四川省', null];
            arr[arr.length] = [3, '广东省', null];
            arr[arr.length] = [4, '北京市', 1];
            arr[arr.length] = [5, '成都市', 2];
            arr[arr.length] = [6, '广州市', 3];
            arr[arr.length] = [7, '深圳市', 3];
            arr[arr.length] = [8, '武侯区', 5];
            arr[arr.length] = [9, '青羊区', 5];
            arr[arr.length] = [10, '白云区', 6];
            arr[arr.length] = [11, '增城市', 6];
            arr[arr.length] = [12, '从化市', 6];
            //动态设置下拉项目
            function fillOptions(type){
                if(type == 'province'){
                    //获取省份下拉菜单的DOM
                    var province = document.getElementById("province");
                    province.innerHTML = '';        //内容先置空
                    //填充省的字符
                    var proStr = '<option value=""></option>';                  
                    for(var i=0; i<arr.length; i++){    //遍历数组
                        var item = arr[i];          //当前项
                        //如果没有父id,则是省份
                        if(item[2] == null)
                            proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
                    }
                    province.innerHTML = proStr;    //填充新内容
                }else if(type == 'city'){
                    //获取当前的省份的id
                    var currProId = document.getElementById("province").value;
                    if(currProId == '')
                        return false;
                    //获取城市下拉菜单的DOM
                    var city = document.getElementById("city");
                    city.innerHTML = '';            //内容先置空
                    //填充市的字符
                    var cityStr = '<option value=""></option>';                 
                    for(var i=0; i<arr.length; i++){    //遍历数组
                        var item = arr[i];          //当前项
                        //判断是否为当前省下的城市
                        if(item[2] == currProId)
                            cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
                    }
                    city.innerHTML = cityStr        ;//填充新内容
                }else if(type == 'area'){
                    //获取当前城市的id
                    var currCityId = document.getElementById("city").value;
                    if(currCityId == '')
                        return false;
                    //获取区县下拉菜单的DOM
                    var area = document.getElementById("area");
                    area.innerHTML = '';            //内容先置空
                    //填充区县的字符
                    var areaStr = '<option value=""></option>';                 
                    for(var i=0; i<arr.length; i++){    //遍历数组
                        var item = arr[i];          //当前项
                        //判断是否为当前城市下的区县
                        if(item[2] == currCityId)
                            areaStr += '<option value='+item[0]+'>'+item[1]+'</option>';
                    }
                    area.innerHTML = areaStr;   //填充新内容
                } 
            }
</script>

<body style="text-align:center;" onload="fillOptions('province');">
        <!-- 定义下拉菜单 -->
        省:<select id="province" onchange="fillOptions('city')"></select><br/><br/>
        市:<select id="city" onchange="fillOptions('area')"></select><br/><br/>
        县/区:<select id="area"></select><br/><br/>
</body>

实例九:输入文字时文本框边框闪烁

onfocus()和onblur()最好成对编写!

<script type="text/javascript">         
    //初始化函数
    function init(){
        //获取所有的文本DOM                
        var texts = document.getElementsByTagName('input');
        //遍历所有的文本框
        for(var i=0;i<texts.length;i++){
            var t = texts[i];//当前文本框
            var timer;
            //监听聚焦事件
            t.onfocus = function(){
                var e = this;//保留当前DOM的引用
                //开始闪烁的定时器
                timer = setInterval(function(){
                    //获取当前的边框颜色变量
                    var c = e.style.borderColor;
                    if(c == 'yellow'){//如果是黄色
                        e.style.borderColor = '';//恢复原色
                    }else{//否则,边框变成黄色
                        e.style.borderColor = 'yellow';
                    }
                },1000);//每1秒闪烁一次
            };
            t.onblur = function(){//监听离开事件
                //恢复边框颜色
                t.style.borderColor = '';
                clearInterval(timer);//清除定时器
            }
        }
    }
</script>

<body style="text-align:center;" onload="init();">
  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值