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

本文实例为大家分享了特殊js文本输入框网页特效，供大家参考，具体内容如下
实例一：让文本框只带有下划线

<script type="text/javascript"> function changeTextStyle（）{ //让文本框只带有下划线//获得文本框的DOMvar 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（）{//获得文本框的DOMvar 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的首字母需要大写
";alert（errMsg）;}if（val2 ！= "" && ！/[A-Z]+/.test（val2））{//拼接错误字符errMsg = "文本框2的需要全部为大写字母
";alert（errMsg）;}}</script>

实例三：只能输入数字的文本框

<script type="text/javascript"> //格式校验function validateInput（）{//获得文本框的DOMvar myText = document.getElementById（"myText"）;var val = myText.value; //获取用户输入的值if（！/[0-9]+/.test（val））{//使用正则校验alert（"只能输入数字"）;//提示错误信息}}</script>

实例四：用正则表达式验证Email格式

<script type="text/javascript"> //格式校验function validateInput（）{//获得文本框的DOMvar 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（）{ //格式校验//获得文本框的DOMvar myTel = document.getElementById（"myTel"）;var val = myTel.value; //获取用户输入的值if（！/[0-9]+/.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（）{//获取所有的文本DOMvar 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（）;">

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