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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
浅谈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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
教你如何使用php session
2013/10/28 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
js实现验证码功能
2020/07/24 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python的Tqdm模块的使用
2018/01/10 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python time库基本使用方法分析
2019/12/13 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
初三新学期计划书
2014/05/03 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
python pyhs2 的安装操作
2021/04/07 Python
canvas多重阴影发光效果实现
2021/04/20 Javascript
Python time库的时间时钟处理
2021/05/02 Python