国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

input標簽內容改變觸發的事件

sanyang / 1595人閱讀

摘要：原生方法事件事件在內容改變且失去焦點的時候觸發。直接更改值時不觸發事件事件在輸入內容改變的時候實時觸發。與聯合使用是的標準事件，對于檢測和這幾個元素通過用戶界面發生的內容變化非常有用，在內容修改后立即被觸發，不像事件需要失去焦點才觸發。

原生方法 onchange事件 
function onc(data){
    console.log(data.value);
}

onchange事件在內容改變且失去焦點的時候觸發。即，失去焦點了內容未變不觸發，內容變了未失去焦點也不實時觸發。
js直接更改value值時不觸發

oninput事件 
function inp(data) {
    console.log(data.value)
}

oninput事件在輸入內容改變的時候實時觸發。oninput事件是IE之外的大多數瀏覽器支持的事件，在value改變時實時觸發。
js直接更改value值時不觸發。

onpropertychange事件

onpropertychange事件是實時觸發，每增加或刪除一個字符就會觸發，通過js改變也會觸發該事件，但是該事件是IE專有。
當input設置為disable=true后，不會觸發。

oninput事件與onpropertychange事件的區別：

onpropertychange事件是任何屬性改變都會觸發，而oninput卻只在value改變時觸發，oninput要通過addEventListener()來注冊，onpropertychange注冊方法與一般事件相同。

oninput與onpropertychange聯合使用

　　oninput 是 HTML5 的標準事件，對于檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發生的內容變化非常有用，在內容修改后立即被觸發，不像 onchange 事件需要失去焦點才觸發。oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，這個事件在用戶界面改變或者使用腳本直接修改內容兩種情況下都會觸發，有以下幾種情況：

修改了 input:checkbox 或者 input:radio 元素的選擇中狀態， checked 屬性發生變化。
修改了 input:text 或者 textarea 元素的值，value 屬性發生變化。
修改了 select 元素的選中項，selectedIndex 屬性發生變化。
　　在監聽到 onpropertychange 事件后，可以使用 event 的 propertyName 屬性來獲取發生變化的屬性名稱。

　　集合 oninput & onpropertychange 監聽輸入框內容變化的示例代碼如下：

// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

function OnInput (event) {
    alert ("The new content: " + event.target.value);
}

// Internet Explorer

function OnPropChanged (event) {
    if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
    }
}
使用 jQuery

只需要同時綁定 oninput 和 onpropertychange 兩個事件就可以了，示例代碼如下：

$("textarea").bind("input propertychange", function() {
    $(".msg").html($(this).val().length + " characters");
});

　　最后需要注意的是：oninput 和 onpropertychange 這兩個事件在 IE9 中都有個小BUG，那就是通過右鍵菜單菜單中的剪切和刪除命令刪除內容的時候不會觸發，而 IE 其他版本都是正常的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108702.html

相關文章

  • 前端培訓-初級階段-場景實戰（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

    摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我...

    Yuanf 評論0 收藏0

  • 前端培訓-初級階段-場景實戰（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

    摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我...

    BDEEFE 評論0 收藏0

  • angularjs學習筆記—事件指令

    摘要：適用標簽所有觸發條件單擊適用標簽所有觸發條件雙擊適用標簽觸發條件失去焦點適用標簽觸發條件獲取焦點適用標簽觸發條件更新輸入框的內容改變并不代表的值更新。如果按一個鍵很久才松開，發生的事件為。 ngClick 適用標簽：所有觸發條件：單擊 #html click me click me #script angular.module(learnModule, []) ...

    Lemon_95 評論0 收藏0

  • JavaScript 基礎知識 - DOM篇(一)

    摘要：前言本篇文章是基礎知識的篇，如果前面的基礎知識入門篇看完了，現在就可以學習了?；靖拍罘譃槿齻€部分。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。在對象中的屬性是一個布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言 本篇文章是JavaS...

    cuieney 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<