javascript特殊文本输入框网页特效

来源:爱站网时间:2020-03-16编辑:网友分享
网页的文本输入框中,为了能更提示用户的明显,一般会在javascript中编写代码,现在就由爱站技术频道小编为大家介绍javascript特殊文本输入框网页特效,一起进入下文来学习一下吧!

网页的文本输入框中,为了能更提示用户的明显,一般会在javascript中编写代码,现在就由爱站技术频道小编为大家介绍javascript特殊文本输入框网页特效,一起进入下文来学习一下吧!

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

<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()"/>

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

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();">

上述是爱站技术频道小编介绍的javascript特殊文本输入框网页特效,如果要有实践的经验,首先要有过硬的专业知识,才能在实践中所向披靡。

上一篇:vue.js开发环境搭建教程

下一篇:JS简单去除数组中重复项的方法

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载