快捷導(dǎo)航

javascript特殊文本輸入框網(wǎng)頁特效

更新時間：2016年09月13日 14:50:45 作者：gemingzhu

這篇文章主要為大家詳細介紹了javascript特殊文本輸入框網(wǎng)頁特效,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了特殊js文本輸入框網(wǎng)頁特效，供大家參考，具體內(nèi)容如下

實例一：讓文本框只帶有下劃線

<script type="text/javascript">           
  function changeTextStyle(){       //讓文本框只帶有下劃線
    //獲得文本框的DOM
    var myText = document.getElementById("myText");           
    myText.style.borderColor = 'black';   //設(shè)置邊框顏色
    myText.style.borderStyle = 'solid';   //設(shè)置邊框樣式為實線
    myText.style.borderWidth = '0 0 1px 0'; //設(shè)置邊框大小，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>

實例三：只能輸入數(shù)字的文本框

<script type="text/javascript">     
      //格式校驗
      function validateInput(){
        //獲得文本框的DOM
        var myText = document.getElementById("myText");
        var val = myText.value;     //獲取用戶輸入的值
        if(!/\b[0-9]+\b/.test(val)){    //使用正則校驗
          alert('只能輸入數(shù)字');      //提示錯誤信息
        }
      }
</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>

實例五：成為焦點時清除文本框內(nèi)容

<script type="text/javascript">     
      //清楚內(nèi)容
      function clearContent(myText){
        myText.value = '';   //把文本內(nèi)容的值設(shè)為空字符
      }
</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('只能輸入數(shù)字');      //提示錯誤信息
      //修改樣式，引起注意
      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">     
  //初始化函數(shù)
  function init(){
    //獲取所有的文本DOM        
    var texts = document.getElementsByTagName('input');
    //遍歷所有的文本框
    for(var i=0;i<texts.length;i++){
      var t = texts[i];//當前文本框
      var timer;
      //監(jiān)聽聚焦事件
      t.onfocus = function(){
        var e = this;//保留當前DOM的引用
        //開始閃爍的定時器
        timer = setInterval(function(){
          //獲取當前的邊框顏色變量
          var c = e.style.borderColor;
          if(c == 'yellow'){//如果是黃色
            e.style.borderColor = '';//恢復(fù)原色
          }else{//否則，邊框變成黃色
            e.style.borderColor = 'yellow';
          }
        },1000);//每1秒閃爍一次
      };
      t.onblur = function(){//監(jiān)聽離開事件
        //恢復(fù)邊框顏色
        t.style.borderColor = '';
        clearInterval(timer);//清除定時器
      }
    }
  }
</script>

<body style="text-align:center;" onload="init();">

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: