【金沙8331网址】javascript特殊文本输入框网页特效_javascript技巧_脚本之家

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

【金沙8331网址】javascript特殊文本输入框网页特效_javascript技巧_脚本之家。本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法。分享给大家供大家参考。具体如下:

实例一:金沙8331网址,让文本框只带有下划线

这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消失,除非你输入的是规定内的字符格式,并且对输入数字大小也有限制!为保证兼容性,请使用火狐浏览器。

 function changeTextStyle(){ //让文本框只带有下划线 //获得文本框的DOM var myText = document.getElementById; myText.style.borderColor = 'black'; //设置边框颜色 myText.style.borderStyle = 'solid'; //设置边框样式为实线 myText.style.borderWidth = '0 0 1px 0'; //设置边框大小,0代表无 }

实例二:首字母或全部字母大写

首页html,body{margin:0; padding:20px;}var text = document.getElementById;text.onkeyup = function(){this.value=this.value.replace;if{ text.value = 100;}}
 //格式校验 function validateInput(){ //获得文本框的DOM var myText1 = document.getElementById; var myText2 = document.getElementById; var val1 = myText1.value; //文本框1的值 var val2 = myText2.value; //文本框2的值 var errMsg = ''; //定义错误提示字符 //判断是否以大写字母开头 if(val1 != '' && >'Z' || val1.charAt{ //拼接错误字符 errMsg = '文本框1的首字母需要大写n'; alert; } if(val2 != '' && !/b[A-Z]+b/.test{ //拼接错误字符 errMsg = '文本框2的需要全部为大写字母n'; alert; } }

希望本文所述对大家的javascript程序设计有所帮助。

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

 //格式校验 function validateInput(){ //获得文本框的DOM var myText = document.getElementById; var val = myText.value; //获取用户输入的值 if(!/b[0-9]+b/.test{ //使用正则校验 alert; //提示错误信息 } }

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

 //格式校验 function validateInput(){ //获得文本框的DOM var myText = document.getElementById; var email = myText.value; //获得用户输入的Email //定义正则表达式 var emailReg = /^+@+({1,2})$/; if{ //判断是否符合格式要求 alert; //通过 }else{ alert; //验证失败 } }

实例五:成为焦点时清除文本框内容

 //清楚内容 function clearContent{ myText.value = ''; //把文本内容的值设为空字符 }

实例六:用户输入完以后立刻进行格式校验

 function validateTel(){ //格式校验 //获得文本框的DOM var myTel = document.getElementById; var val = myTel.value; //获取用户输入的值 if(!/b[0-9]+b/.test{ //使用正则校验 alert; //提示错误信息 //修改样式,引起注意 myTel.style.border = '1px solid red'; }else if{ //长度必须是11位 alert; //提示错误信息 //修改样式,引起注意 myTel.style.border = '1px solid red'; }else{ //修改样式,表示通过了 myTel.style.border = '1px solid green'; return true; } }

实例七:输入文字时文本框边框闪烁

onfocus最好成对编写!

 //初始化函数 function init(){ //获取所有的文本DOM var texts = document.getElementsByTagName; //遍历所有的文本框 for(var i=0;i<texts.length;i++){ var t = texts[i];//当前文本框 var timer; //监听聚焦事件 t.onfocus = function(){ var e = this;//保留当前DOM的引用 //开始闪烁的定时器 timer = setInterval{ //获取当前的边框颜色变量 var c = e.style.borderColor; if{//如果是黄色 e.style.borderColor = '';//恢复原色 }else{//否则,边框变成黄色 e.style.borderColor = 'yellow'; } },1000);//每1秒闪烁一次 }; t.onblur = function(){//监听离开事件 //恢复边框颜色 t.style.borderColor = ''; clearInterval;//清除定时器 } } }

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注