標籤：滑鼠 doctype change charset 需求 script 複製 onchange 支援
以往我們實現input的輸入監聽用到的無非是onkeyup、onkeydown、onchange，但是這些都有著一些不好的使用者體驗。比如onchange事件只在鍵盤或者滑鼠操作改變對象屬性，且失去焦點時觸發，指令碼觸發無效；而onkeydown、onkeyup在處理複製、粘貼、拖拽、長按鍵（按住鍵盤不放）等細節上並不完善。
onpropertychange屬性可在某些情況下解決上面存在的問題，不用考慮是否失去焦點，不管js操作還是鍵盤滑鼠手動操作，只要HTML元素屬性發生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。其他瀏覽器下如果想要實現這一即時監聽的需求，就要用到HTML5中的標準事件oninput，不過IE9以下的瀏覽器是不支援oninput事件的。如果要相容IE9以下瀏覽器，就需要oninput和onpropertychange一起使用。
如下執行個體：
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="神棍、Falost">
<title>hello world!</title>
<style type="text/css">
#box{
width:100%;
height:30px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" oninput="Monitor(this)" onpropertychange="Monitor(this)"/>
<script type="text/javascript">
function Monitor(t){
console.log(t.value)
var box = document.getElementById(‘box‘)
box.innerHTML = ‘你當前輸入的是：‘+ t.value
}
</script>
</body>
</html>
即時監聽input中輸入內容的變化。
html5標準事件oninput實現輸入檢測
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
