重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“如何使用JavaScript实现限定输入内容”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JavaScript实现限定输入内容”吧!
成都创新互联公司主要从事网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务沾化,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
在Web项目开发中,经常会遇到一些只能输入固定内容的文本框。例如,只可以输入字母、数字的文本框等,本文的案例是利用正则表达式语法来实现只可以输入四位数的年份、一位数或二位数的月份。接下来,小编大家一起来学习,如何实现限定输入内容!
开发工具:HBuilderX
浏览器:Google Chrome浏览器
1.掌握正则表达式的语法。
2.学会应用正则表达式。
3.掌握焦点事件和失去焦点事件。
限定输入内容
在上面代码中,div的id为box相当于一个大盒子,id为box_01、box_02、box_03相当于一个小盒子,这些小盒子依次放入大盒子中。
id为box_01主要是放置标题;
id为box_02主要是放置图片;
id为box_02主要是放置表单;
id为res是用来检验年份和月份输入是否正确提示信息。
#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)。
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.设置年份和月份失去焦点——主要是用来优化用户的体检效果
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()函数检验年份和月份。
效果图如下所示:
1.本文基于JavaScript基础,实现限定输入内容的功能。对每一个div层进行详解,让读者更好的理解。
2.在JavaScript中首先获取操作元素的对象,事件处理函数年份和月份分别是chooseYear()、chooseMonth()。chooseYear(y)和chooseMonth(m)函数中获取年份元素和月份元素对象,之后,获取它们的value值,使用match()方法进行正则匹配。为了用户的体检效果添加焦点事件和失去焦点事件。
到此,相信大家对“如何使用JavaScript实现限定输入内容”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!