这篇文章主要为大家详细介绍了 javascript 特殊文本输入框网页特效, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实例一:让文本框只带有下划线
- <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();">
来源: http://www.phperz.com/article/17/0521/331899.html