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

本文实例为大家分享了特殊js文本输入框网页特效，供大家参考，具体内容如下

实例一：

让文本框只带有下划线

实例二：

首字母或全部字母大写

'Z' || val1.charAt(0)<'A')){ //拼接错误字符 errMsg = '文本框1的首字母需要大写\n'; alert(errMsg); } if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){ //拼接错误字符 errMsg = '文本框2的需要全部为大写字母\n'; alert(errMsg); } }

实例三：

只能输入数字的文本框

获取用户输入的值 if(!/\b[0-9]+\b/.test(val)){ //使用正则校验 alert('只能输入数字'); //提示错误信息 } }

实例四：

用正则表达式验证Email格式

用户输入的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("校验失败，请检查重新输入"); //验证失败 } }

实例五：

成为焦点时清除文本框内容

内容 function clearContent(myText){ myText.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; } }

实例七：

输入文字时文本框边框闪烁

onfocus()和onblur()最好成对编写！

<div class="jb51code">
<pre class="brush:js;">
<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);//清除定时器
}
}
}

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