如何使用JavaScript實現限定輸入內容

本篇內容主要講解“如何使用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.設置年份和月份失去焦點——主要是用來優化用戶的體檢效果

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實現限定輸入內容”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！