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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
在node中如何使用 ES6
Apr 22 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
如何打开php的gd2库
2017/02/09 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js document.write()使用介绍
2014/02/21 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python搜索指定目录的方法
2015/04/29 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
C#面试题问题集
2016/04/02 面试题
业务经理岗位职责
2013/11/11 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
高一作文之暖冬
2019/11/09 职场文书