您好,登錄后才能下訂單哦!
本篇內容主要講解“如何使用JavaScript實現限定輸入內容”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“如何使用JavaScript實現限定輸入內容”吧!
在Web項目開發中,經常會遇到一些只能輸入固定內容的文本框。例如,只可以輸入字母、數字的文本框等,本文的案例是利用正則表達式語法來實現只可以輸入四位數的年份、一位數或二位數的月份。接下來,小編大家一起來學習,如何實現限定輸入內容!
開發工具:HBuilderX
瀏覽器:Google Chrome瀏覽器
1.掌握正則表達式的語法。
2.學會應用正則表達式。
3.掌握焦點事件和失去焦點事件。
<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是用來檢驗年份和月份輸入是否正確提示信息。
#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實現限定輸入內容”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。