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

2019-11-20 09:01:01

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了特殊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();">

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

上一篇：JavaScript简单下拉菜单特效

下一篇：浅谈JS之iframe中的窗口