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


Posted in Javascript onSeptember 13, 2016

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

实例一:让文本框只带有下划线

<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();">

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

Javascript 相关文章推荐
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
浅谈JS之iframe中的窗口
Sep 13 #Javascript
JS给swf传参数的实现方法
Sep 13 #Javascript
JS之相等操作符详解
Sep 13 #Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 #Javascript
jQuery异步提交表单的两种方式
Sep 13 #Javascript
浅谈JS之tagNaem和nodeName
Sep 13 #Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 #Javascript
You might like
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
js尾调用优化的实现
2019/05/23 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
Python验证码识别处理实例
2015/12/28 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python实现猜数字小游戏
2020/03/24 Python
python实现图片批量压缩程序
2018/07/23 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
python中_del_还原数据的方法
2020/12/09 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
导游的职业规划书范文
2013/12/27 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
环保倡议书50字
2014/05/15 职场文书
娱乐节目策划方案
2014/06/10 职场文书
爱护草坪标语
2014/06/24 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
办公室主任个人总结
2015/02/28 职场文书
严以律己学习心得体会
2016/01/13 职场文书
礼仪培训心得体会
2016/01/22 职场文书
怎么用Python识别手势数字
2021/06/07 Python