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)"/>
实例六:用户输入完以后立刻进行格式校验
<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();">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持安科网。
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22