手把手教你使用JavaScript实现限定输入内容

一、前言

在Web项目开发中,经常会遇到一些只能输入固定内容的文本框。例如,只可以输入字母、数字的文本框等,本文的案例是利用正则表达式语法来实现只可以输入四位数的年份、一位数或二位数的月份。接下来,小编大家一起来学习,如何实现限定输入内容!

创新互联公司是一家专业提供华亭企业网站建设,专注与成都做网站、成都网站设计、html5、小程序制作等业务。10年已为华亭众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

二、项目准备

开发工具:HBuilderX

浏览器:Google Chrome浏览器

三、项目目标

1.掌握正则表达式的语法。

2.学会应用正则表达式。

3.掌握焦点事件和失去焦点事件。

四、项目实现

HTML

 
 
 
 
  1.       
  2.           

    限定输入内容

  3.       
  •       
  •           
  •       
  •       
  •       
  •           年份
  •           月份
  •       
  •       
  •   
  •   
  •   
  • 在上面代码中,div的id为box相当于一个大盒子,id为box_01、box_02、box_03相当于一个小盒子,这些小盒子依次放入大盒子中。

    id为box_01主要是放置标题;

    id为box_02主要是放置图片;

    id为box_02主要是放置表单;

    id为res是用来检验年份和月份输入是否正确提示信息。

    CSS3

     
     
     
     
    1. #box{
    2.         width: 800px;
    3.         height: 430px;
    4.         display: flex;
    5.         text-align: center;
    6.         flex-direction: column;
    7.         justify-content: center;
    8.     }
    9.     #box_01{
    10.         width: 800px;
    11.         height: 70px;
    12.         color: #0086B3;
    13.     }
    14.     img{
    15.         width: 400px;
    16.         height: 300px;
    17.     }
    18.     #box_02{
    19.         width: 800px;
    20.         height: 310px;
    21.     }
    22.     #box_03{
    23.         width: 800px;
    24.         height: 50px;
    25.     }
    26.     #res{
    27.         width: 800px;
    28.         height: 100px;
    29.         font-weight: bold;
    30.         text-align: center;
    31.     }

    在上面代码中,#box表示大盒子的样式,宽度和高度分别为800、430px,使用弹性布局display: flex。

    flex-direction属性表示控制主轴的方向,colum表示垂直方向。

    justify-content属性表示项目在主轴上的对齐方式,center表示中间。

    #box_01、#box_02、#box_03主要是设置div块的宽度和高度。

    #res设置div块宽度、高度、字体加粗(font-weight)、文字对齐方式(text-align)。

    JavaScript

    1.首先是获取操作元素的对象

     
     
     
     
    1. var f=document.getElementById('form')
    2. var res=document.getElementById('res')
    3. var ipc=document.getElementsByTagName('input')

    在上面代码中,使用document.getElementById()方法获取操作元素对象的id,document.getElementsByTagName()方法是返回带有标签名的对象集合。

    2.检验年份函数chooseYear()

     
     
     
     
    1. function chooseYear(y){
    2.     if(!y.value.match(/^\d{4}$/)){
    3.         y.style.borderColor='yellow';
    4.         res.innerHTML='您的输入有误,年份需要4位数字';
    5.         return false;
    6.     }
    7.     alert('年份格式输入正确')
    8.     return true;
    9. }

    在上面代码中,chooseYear(y)函数中的y参数表示年份元素的一个对象,通过获取y的value值,然后使用match()方法进行正则匹配。

    如果年份不是四位数,通过设置文本框的边框颜色为黄色,获取id为res,插入提示信息的内容。

    如果年份是四位数,则使用alert()方法,弹出一个弹框显示“年份格式输入正确”。

    3.检验月份函数chooseMonth()

     
     
     
     
    1. function chooseMonth(m){
    2.     if(!m.value.match(/^((0?[1-9])|(1[012]))$/)){
    3.         m.style.borderColor='yellow';
    4.         res.innerHTML='您的输入有误,月份1~12范围内'
    5.         return false;
    6.     }
    7.     alert('月份格式输入正确')
    8.     return true;
    9. }

    在上面代码中,chooseMonth(m)函数中的m参数表示月份元素的一个对象,通过获取m的value值,然后使用match()方法进行正则匹配。

    ”(0?[1-9])“表示前面有0或没有0的表示第一月份到第九月份;

    “(1[012])”表示第十月份到十二月份。

    4.设置年份和月份焦点事件

     
     
     
     
    1. ipc.year.onfocus=function(){
    2.     this.style.borderColor='blue'
    3. }
    4. ipc.month.onfocus=function(){
    5.     this.style.borderColor='blue'
    6. }

    在上面代码中,用户点击年份和月份输入框,设置焦点事件,之后,设置文本框的颜色为蓝色。

    5.设置年份和月份失去焦点——主要是用来优化用户的体检效果

     
     
     
     
    1. ipc.year.onblur=function(){
    2.     this.value=this.value.trim();
    3.     chooseYear(this);
    4. }
    5. ipc.month.onblur=function(){
    6.     this.value=this.value.trim();
    7.     chooseMonth(this);
    8. }

    在上面代码中,trim()方法是去掉两端的空格。

    6.检验提交的表单

     
     
     
     
    1. f.onsubmit=function(){
    2.     return chooseYear(ipc.year)&&chooseMonth(ipc.month)
    3. };

    在上面代码中,表单提交时,调用chooseYear()和chooseMonth()函数检验年份和月份。

    效果图如下所示:

    五、总结

    1.本文基于JavaScript基础,实现限定输入内容的功能。对每一个div层进行详解,让读者更好的理解。

    2.在JavaScript中首先获取操作元素的对象,事件处理函数年份和月份分别是chooseYear()、chooseMonth()。chooseYear(y)和chooseMonth(m)函数中获取年份元素和月份元素对象,之后,获取它们的value值,使用match()方法进行正则匹配。为了用户的体检效果添加焦点事件和失去焦点事件。

    3.代码没有那么复杂,希望对你有所帮助!

    分享文章:手把手教你使用JavaScript实现限定输入内容
    分享地址:http://www.36103.cn/qtweb/news14/38864.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    做网站知识

    同城分类信息