當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

101_表单事件

發布時間：2025/5/22 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 101_表单事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. onfocus事件

1.1. onfocus事件在對象獲得焦點時發生。

1.2. onfocus通常用于<input>, <select>和<textarea>。

1.3. onfocus事件的相反事件為onblur事件。

1.4. 語法

1.4.1. html中:

1.4.2. JavaScript中:

object.onfocus=function(){SomeJavaScriptCode}

2. onblur事件

2.1. onblur事件會在對象失去焦點時發生。

2.2. onblur通常用于<input>, <select>和<textarea>。

2.3. 語法

2.3.1. html中:

2.3.2. JavaScript中:

object.onblur=function(){SomeJavaScriptCode};

3. onchange事件

3.1. onchange事件會在域的內容改變時發生。

3.2. onchange通常用于<input>, <select>和<textarea>。應用于<select>似乎最合適。

3.3. 語法

3.3.1. html中:

3.3.2. JavaScript中:

object.onchange=function(){SomeJavaScriptCode};

4. 例子

4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onfocus、onblur和onchange事件</title></head><body>用戶名: <input type="text" name="userName" onfocus="userNameInputFocus(event)" onblur="userNameInputBlur(event)" /><br /><br />戶籍: <select name="address" onchange="addressSelectChange(event, this)"><option value="洛陽" selected ="selected ">洛陽</option><option value="濮陽">濮陽</option><option value="南陽">南陽</option><option value="信陽">信陽</option><option value="安陽">安陽</option><option value="鄭州">鄭州</option></select> <br /><br />簡介: <textarea name="info" rows="10" cols="30"></textarea><script type="text/javascript">function userNameInputFocus(e){console.log('用戶名輸入框獲取焦點');}function userNameInputBlur(e){console.log('用戶名輸入框失去焦點');}function addressSelectChange(e, obj){console.log('用戶選擇的地址: ' + obj.value);}</script></body> </html>

4.2. 效果圖

5. oninput事件

5.1. oninput事件在用戶輸入時觸發。

5.2. 該事件在<input>或<textarea>元素的值發生改變時觸發。

5.3. 該事件類似于onchange事件。不同之處在于oninput事件在元素值發生變化是立即觸發, onchange在元素失去焦點時觸發。另外一點不同是onchange事件也可以作用于<keygen>和<select>元素。

5.4. 語法

5.4.1. html中:

5.4.2. JavaScript中:

object.oninput=function(){myScript};

6. onselect事件

6.1. onselect事件會在文本框中的文本被選中時發生。

6.2. onselect屬性可用于: <input type="file">, <input type="password">, <input type="text">, <keygen>和<textarea>。

6.3. 語法

6.3.1. html中:

6.3.2. JavaScript中:

object.onselect=function(){SomeJavaScriptCode}

7. onreset事件

7.1. onreset事件在表單被重置后觸發。

7.2. onreset事件應用于<form>元素。

7.3. 語法

7.3.1. html中:

7.3.2. JavaScript中:

object.onreset=function(){myScript};

8. onsubmit事件

8.1. onsubmit事件在表單提交時觸發。

8.2. onsubmit事件應用于<form>元素。

8.3. 語法

8.3.1. html中:

8.3.2. JavaScript中:

object.onsubmit=function(){myScript};

9. 例子

9.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>oninput、onselect、onreset和onsubmit事件</title></head><body><form onreset="myReset(event)" onsubmit="return mySubmit(event)">用戶名: <input type="text" name="uName" value="請輸入用戶名" onselect="userNameOnselect(event, this)" /> <br /><br />簡介: <textarea name="info" rows="10" cols="30" oninput="infoOninput(event, this)"></textarea> <br /><br /><input type="reset" value="重置" /> <input type="submit" value="提交" /></form><script type="text/javascript">function userNameOnselect(e, obj){console.log('用戶選中的值: ' + obj.value);}function infoOninput(e, obj){console.log('用戶輸入簡介: ' + obj.value);}function myReset(e){console.log('用戶名重置數據');}function mySubmit(e){console.log('用戶名提交數據');return false;}</script></body> </html>

9.2. 效果圖

總結

以上是生活随笔為你收集整理的101_表单事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。