文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用JavaScript实现限定输入内容

2024-04-02 19:55

关注

本篇内容主要讲解“如何使用JavaScript实现限定输入内容”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JavaScript实现限定输入内容”吧!

一、前言

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

二、项目准备

开发工具:HBuilderX

浏览器:Google Chrome浏览器

三、项目目标

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

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

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

四、项目实现

HTML

<div id="box">       <div id="box_01">           <h3>限定输入内容</h3>       </div>       <div id="box_02">           <img src="img/1.jpg" />       </div>       <div id="box_03">       <form id="form">           年份<input type="text" name="year" />           月份<input type="text" name="month" />       <input type="submit" value="查询" />       </form>   </div>   </div>   <div id="res"></div>

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

id为box_01主要是放置;

id为box_02主要是放置图片;

id为box_02主要是放置表单;

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

CSS3

#box{         width: 800px;         height: 430px;         display: flex;         text-align: center;         flex-direction: column;         justify-content: center;     }     #box_01{         width: 800px;         height: 70px;         color: #0086B3;     }     img{         width: 400px;         height: 300px;     }     #box_02{         width: 800px;         height: 310px;     }     #box_03{         width: 800px;         height: 50px;     }     #res{         width: 800px;         height: 100px;         font-weight: bold;         text-align: center;     }

在上面代码中,#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.首先是获取操作元素的对象

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

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

2.检验年份函数chooseYear()

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

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

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

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

3.检验月份函数chooseMonth()

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

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

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

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

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

ipc.year.onfocus=function(){     this.style.borderColor='blue' } ipc.month.onfocus=function(){     this.style.borderColor='blue' }

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

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

ipc.year.onblur=function(){     this.value=this.value.trim();     chooseYear(this); } ipc.month.onblur=function(){     this.value=this.value.trim();     chooseMonth(this); }

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

6.检验提交的表单

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

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

效果图如下所示:

如何使用JavaScript实现限定输入内容

五、总结

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

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

到此,相信大家对“如何使用JavaScript实现限定输入内容”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯