Event事件對象之表單事件

1. onblur

在對象失去焦點時發生

Onblur 經常用於Javascript驗證代碼，一般用於表單輸入框。

提示

onblur 相反事件爲 onfocus 事件。

支持的HTML標籤

除了： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>元素以外都可以

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onblur=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.onfocus = function(){
        span.innerText = "    離開此輸入框會有驚喜喲！";
    }

    input.onblur = function(){
        span.innerText = "";
        div.innerText = input.value;
    }

</script>
</html>

2. onchange

在域的內容改變時發生

提示

onchange 事件也可用於單選框與複選框改變後觸發的事件。
值在改變時候纔會觸發，當焦點離開時值才改變。

支持的HTML標籤

除了： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>元素以外都可以

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onfocus=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.onchange = function(){
        div.innerText = this.value;
    }

</script>
</html>

3. onfocus

在對象獲得焦點時發生

提示

Onfocus 通常用於 <input>, <select>, <a>.
onfocus 事件的相反事件爲 onblur 事件。

支持的HTML標籤

<input>, <select>, 和 <textarea>

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onchange=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.onfocus = function(){
        span.innerText = "    離開此輸入框會有驚喜喲！";
    }

    input.onblur = function(){
        span.innerText = "";
        div.innerText = input.value;
    }

</script>
</html>

4. onfocusin

在一個元素即將獲得焦點時觸發

提示

onfocusin 事件類似於 onfocus 事件。主要的區別是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否獲取焦點，需要使用 onfocusin 事件。
雖然 Firefox 瀏覽器不支持 onfocusin 事件，但你可以通過使用 onfocus （使用addEventListener()方法的可選參數 useCapture）的捕獲監聽事件來查看元素或其子元素是否獲取焦點。
onfocusin 事件的相反事件是 onfocusout 事件。
支持冒泡。

支持的HTML標籤

除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>

瀏覽器支持

google	IE	firefox	safari	opera
true	9.0	false	true	true

注意

在 Chrome, Safari 和 Opera 15+ 瀏覽器中使用 HTML DOM 語法的 onfocusin 事件可能無法正常工作。但是，他作爲一個 HTML 元素，通過使用 addEventListener() 方法可以正常工作。

ElementObject.onfocusin=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.addEventListener('focusin',function(){
        alert('你點我了');
    })

    input.addEventListener('focusout',function(){
        alert('你點它了');
    })

</script>
</html>

5. onfocusout

在元素即將失去焦點時觸發

提示

onfocusout 事件類似於 onblur 事件。主要的區別是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否獲取焦點，需要使用 onfocusout 事件。
雖然 Firefox 瀏覽器不支持 onfocusout 事件，但你可以通過使用 onblur （使用addEventListener()方法的可選參數 useCapture）的捕獲監聽事件來查看元素或其子元素是否獲取焦點。
onfocusout 事件的相反事件是 onfocusin 事件。
支持冒泡。

支持的HTML標籤

除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>

瀏覽器支持

google	IE	firefox	safari	opera
true	9.0	false	true	true

注意

在 Chrome, Safari 和 Opera 15+ 瀏覽器中使用 HTML DOM 語法的 onfocusout 事件可能無法正常工作。但是，他作爲一個 HTML 元素，通過使用 addEventListener() 方法可以正常工作。

ElementObject.onfocusin=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.addEventListener('focusin',function(){
        alert('你點我了');
    })

    input.addEventListener('focusout',function(){
        alert('你點它了');
    })

</script>
</html>

6. oninput

在用戶輸入時觸發

提示

該事件在或元素的值發生改變時觸發
該事件類似於 onchange 事件。不同之處在於 oninput 事件在元素值發生變化是立即觸發， onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用於和元素。
支持冒泡。

支持的HTML標籤

<input type="password">, <input type="search">, <input type="text"> 和 <textarea>

瀏覽器支持

google	IE	firefox	safari	opera
true	9.0	4.0	5.0	true

ElementObject.oninput=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.oninput = function(){
        div.innerText = this.value;
    }
</script>
</html>

7. onreset

在表單被重置後觸發

提示

支持冒泡。
事件響應後重置文本。

支持的HTML標籤

<form>, <keygen>

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onreset=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <form id='form'>
        輸入您的名字: <input id = 'inputText' type="text">
        <input type="reset">
    </form>
</body>
<script>
    var i = 0;
    form.onreset = function(){
        i++;
        setTimeout(text,0)//防止信息被重置，將事件響應放入棧底
    }

    function text()
    {
        if(i)
        inputText.value = '重置了' + i +'次';
    }
</script>
</html>

8. onselect

在文本框中的文本被選中時發生

支持的HTML標籤

可用於: <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>.

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onselect=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
<script>
function myFunction(){
    alert("你選中了一些文本");
}
</script>
</head>
<body>

一些文本: <input type="text" value="Hello world!" onselect="myFunction()">

</body>
</html>

9. onsubmit

在表單提交時觸發

提示

支持冒泡

支持的HTML標籤

<form>, <keygen>

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onsubmit=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p>當提交表單是，觸發函數並彈出提示信息。</p>
<form action="demo-form.php" onsubmit="myFunction()">
  輸入名字: <input type="text" name="fname">
  <input type="submit" value="提交">
</form>
<script>
function myFunction() {
    alert("表單已提交");
}
</script>

</body>
</html>