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

时间:2020-05-15 gemingzhu 人气:0

本文实例为大家分享了特殊js文本输入框网页特效，供大家参考，具体内容如下

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

加载全部内容