表單事件集錦-input

william 發(fā)布于2019-08-22 11:23 / 3156人閱讀

最近在寫一個手機端提交表單的項目，里面用了不少input標簽，因為項目不太忙，所以，想做的完美點，但是遇到了一些問題，比如：頁面中的必填項如果有至少一項為空，提交按鈕就是不能提交的狀態(tài)，所以需要對所有的input內(nèi)容進行監(jiān)聽，剛開始我用了jquery的keyup事件解決問題，但是后來測試出一個bug，如果用戶選擇粘貼復制的話，keyup事件不能觸發(fā)，也就不能通過判斷input內(nèi)容來改變提交按鈕的狀態(tài)。下面就這種問題做下總結(jié)，希望對自己和他人以后能有點幫助。

1.onfocus 當input 獲取到焦點時觸發(fā)

2.onblur 當input失去焦點時觸發(fā)，注意：這個事件觸發(fā)的前提是已經(jīng)獲取了焦點再失去焦點的時候會觸發(fā)相應(yīng)的js

3.onchange 當input失去焦點并且它的value值發(fā)生變化時觸發(fā)

4.onkeydown 在 input中有鍵按住的時候執(zhí)行一些代碼

5.onkeyup 在input中有鍵抬起的時候觸發(fā)的事件，在此事件觸發(fā)之前一定觸發(fā)了onkeydown事件

6.onclick 主要是用于 input type=button，當被點擊時觸發(fā)此事件

7.onselect 當input里的內(nèi)容文本被選中后執(zhí)行一段，只要選擇了就會觸發(fā)，不是非得全部選中

8.oninput 當input的value值發(fā)生變化時就會觸發(fā)，不用等到失去焦點（與onchange的區(qū)別）

以上事件可以直接放到input的屬性里，例如：，也可以通過js給input dom元素添加相應(yīng)的事件，如：document.getElementByTagName("input").onfocus = function();

云服務(wù)器 GPU云服務(wù)器 form表單提交input 語法集錦經(jīng)典語句集錦 java面試集錦

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92305.html

相關(guān)文章

表單事件集錦-input

最近在寫一個手機端提交表單的項目，里面用了不少input標簽，因為項目不太忙，所以，想做的完美點，但是遇到了一些問題，比如：頁面中的必填項如果有至少一項為空，提交按鈕就是不能提交的狀態(tài)，所以需要對所有的input內(nèi)容進行監(jiān)聽，剛開始我用了jquery的keyup事件解決問題，但是后來測試出一個bug，如果用戶選擇粘貼復制的話，keyup事件不能觸發(fā)，也就不能通過判斷input內(nèi)容來改變提交按鈕的狀...

darry 2019-08-01 18:16 評論0 收藏0
表單事件集錦-input

最近在寫一個手機端提交表單的項目，里面用了不少input標簽，因為項目不太忙，所以，想做的完美點，但是遇到了一些問題，比如：頁面中的必填項如果有至少一項為空，提交按鈕就是不能提交的狀態(tài)，所以需要對所有的input內(nèi)容進行監(jiān)聽，剛開始我用了jquery的keyup事件解決問題，但是后來測試出一個bug，如果用戶選擇粘貼復制的話，keyup事件不能觸發(fā)，也就不能通過判斷input內(nèi)容來改變提交按鈕的狀...

Michael_Lin 2019-08-29 14:04 評論0 收藏0
#yyds干貨盤點# 前端基礎(chǔ)知識面試集錦1

摘要：作用標準模式與兼容模式各有什么區(qū)別聲明位于位于文檔中的第一行，處于標簽之前。又稱內(nèi)核及以上版本，等內(nèi)核及以上。存儲大小數(shù)據(jù)大小不能超過?？梢苑乐箰阂馑⑵闭搲嗨行Х乐箤δ骋粋€特定注冊用戶用特定程序暴力方式進行不斷的登陸嘗試。 HTMLDoctype作用？標準模式與兼容模式各有什么區(qū)別?（1）、聲明位于位于HT...

番茄西紅柿 2021-11-22 15:29 評論0 收藏2637
微信小程序知識總結(jié)及案例集錦

摘要：對微信小程序進行全局配置，決定頁面文件的路徑窗口表現(xiàn)設(shè)置網(wǎng)絡(luò)超時時間設(shè)置多等。微信小程序知識總結(jié)及案例集錦微信小程序的發(fā)展會和微信公眾號一樣，在某個時間點爆發(fā) 學習路徑微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達微信官方文檔認真跟著文檔看一遍，相信有vue前端經(jīng)驗的看下應(yīng)該就能上手了，然后安裝微信小程序開發(fā)者工具新建一個quick start項目，了解代碼結(jié)構(gòu)，...

sean 2019-08-20 17:45 評論0 收藏0
VueJS 開發(fā)常見問題集錦

摘要：由于公司的前端開始轉(zhuǎn)向，最近開始使用這個框架進行開發(fā)，遇到一些問題記錄下來，以備后用。查了一下，發(fā)現(xiàn)可能是打包或是資源引用問題，目前該問題還未被妥善處理，需要通過一些來解決這個問題。為解決這個問題，中提供了方法對象受現(xiàn) showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端開始轉(zhuǎn)向 VueJS，最近開始使用這...

hedge_hog 2019-08-20 18:07 評論0 收藏0