javascript特殊文本输入框网页特效
本文实例为大家分享了特殊js文本输入框网页特效，供大家参考，具体内容如下
实例一：让文本框只带有下划线
<scripttype="text/javascript">
functionchangeTextStyle(){//让文本框只带有下划线
//获得文本框的DOM
varmyText=document.getElementById("myText");
myText.style.borderColor='black';//设置边框颜色
myText.style.borderStyle='solid';//设置边框样式为实线
myText.style.borderWidth='001px0';//设置边框大小，0代表无
}
</script>
实例二：首字母或全部字母大写
<scripttype="text/javascript">
//格式校验
functionvalidateInput(){
//获得文本框的DOM
varmyText1=document.getElementById("myText1");
varmyText2=document.getElementById("myText2");
varval1=myText1.value;//文本框1的值
varval2=myText2.value;//文本框2的值
varerrMsg='';//定义错误提示字符
//判断是否以大写字母开头
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>
实例三：只能输入数字的文本框
<scripttype="text/javascript">
//格式校验
functionvalidateInput(){
//获得文本框的DOM
varmyText=document.getElementById("myText");
varval=myText.value;//获取用户输入的值
if(!/\b[0-9]+\b/.test(val)){//使用正则校验
alert('只能输入数字');//提示错误信息
}
}
</script>
实例四：用正则表达式验证Email格式
<scripttype="text/javascript">
//格式校验
functionvalidateInput(){
//获得文本框的DOM
varmyText=document.getElementById("myText");
varemail=myText.value;//获得用户输入的Email
//定义正则表达式
varemailReg
=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(emailReg.test(email)){//判断是否符合格式要求
alert("校验通过，允许提交");//通过
}else{
alert("校验失败，请检查重新输入");//验证失败
}
}
</script>
实例五：成为焦点时清除文本框内容
<scripttype="text/javascript">
//清楚内容
functionclearContent(myText){
myText.value='';//把文本内容的值设为空字符
}
</script>
<inputtype="text"value=""onfocus="clearContent(this)"/>
实例六：用户输入完以后立刻进行格式校验
<scripttype="text/javascript">
functionvalidateTel(){//格式校验
//获得文本框的DOM
varmyTel=document.getElementById("myTel");
varval=myTel.value;//获取用户输入的值
if(!/\b[0-9]+\b/.test(val)){//使用正则校验
alert('只能输入数字');//提示错误信息
//修改样式，引起注意
myTel.style.border='1pxsolidred';
}elseif(val.length!=11){//长度必须是11位
alert('手机号码是11位');//提示错误信息
//修改样式，引起注意
myTel.style.border='1pxsolidred';
}else{
//修改样式，表示通过了
myTel.style.border='1pxsolidgreen';
returntrue;
}
}
</script>
<inputtype="text"value=""id="myTel"onblur="validateTel()"/>
实例七：输入文字时文本框边框闪烁
onfocus()和onblur()最好成对编写！
<scripttype="text/javascript">
//初始化函数
functioninit(){
//获取所有的文本DOM
vartexts=document.getElementsByTagName('input');
//遍历所有的文本框
for(vari=0;i<texts.length;i++){
vart=texts[i];//当前文本框
vartimer;
//监听聚焦事件
t.onfocus=function(){
vare=this;//保留当前DOM的引用
//开始闪烁的定时器
timer=setInterval(function(){
//获取当前的边框颜色变量
varc=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>
<bodystyle="text-align:center;"onload="init();">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。