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

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