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

最新推荐文章于 2022-08-19 14:23:23 发布

find面码

最新推荐文章于 2022-08-19 14:23:23 发布

阅读量1.2k

点赞数 2

分类专栏：学习记录文章标签： javascript dom

本文链接：https://blog.csdn.net/gemingzhu/article/details/52507158

版权

本文介绍了使用JavaScript实现的多种网页特效，包括文本框的样式调整（如只显示下划线）、输入限制（如首字母大写、只允许输入数字）、邮箱验证、焦点时清空内容、实时格式校验，以及联动的省市县下拉菜单等。通过这些实例，可以提升网页交互体验。

摘要由CSDN通过智能技术生成

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

<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("校验通过，允许提交");     //通过