如何利用原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值
原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值
原生JS中可以使用oninput,onpropertychange,onchange
oninput,onpropertychange,onchange的用法
1) onchange 觸發(fā)事件必須滿足兩個(gè)條件:
- a)當(dāng)前對(duì)象屬性改變,并且是由鍵盤(pán)或鼠標(biāo)事件激發(fā)的(腳本觸發(fā)無(wú)效)
- b)當(dāng)前對(duì)象失去焦點(diǎn)(onblur);
2) onpropertychange ,只要當(dāng)前對(duì)象屬性發(fā)生改變,都會(huì)觸發(fā)事件,但是它是IE專屬的;
3) oninput 是onpropertychange的非IE瀏覽器版本,支持firefox和opera等瀏覽器,但有一點(diǎn)不同,它綁定于對(duì)象時(shí),并非該對(duì)象所有屬性改變都能觸發(fā)事件,它只在對(duì)象value值發(fā)生改變時(shí)奏效。
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title></title> ?? ?</head> ?? ?<body> ?? ??? ?請(qǐng)輸入字符:<input type="text" id='d0'/> ?? ??? ?<hr /> ?? ??? ?你是輸入的字符為: <div id='d1'></div> ?? ??? ? ?? ??? ?<script> ?? ??? ??? ?var input = document.getElementById('d0') ?? ??? ??? ? ?? ??? ??? ?var div = document.getElementById('d1'); ?? ??? ??? ?input.oninput = function(){ ?? ??? ??? ??? ?div.innerHTML = input.value; ?? ??? ??? ?} ? ?? ??? ?</script> ?? ?</body> </html>
原生JS input[type=range] 監(jiān)聽(tīng)值變化
<input id="density" type="range" ?oninput="densityInput(event)" onpropertychange="OnPropChanged(event)">
//js ?function OnInput (event) { ? ? console.log(event.target.value); ? } ? // Internet Explorer? ? function OnPropChanged (event) { ? ? ? if (event.propertyName.toLowerCase () == "value") { ? ? ? ? ? console.log(event.srcElement.value); ? ? ? } ? }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JS實(shí)現(xiàn)購(gòu)物車(chē)基本功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車(chē)基本功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript Base64 作為文件上傳的實(shí)例代碼解析
這篇文章主要介紹了JavaScript Base64 作為文件上傳的實(shí)例代碼解析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02JavaScript中alert的使用方法超詳細(xì)介紹
JS中的alert作用是在瀏覽器中彈出一個(gè)警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關(guān)于JavaScript中alert使用方法的相關(guān)資料,需要的朋友可以參考下2024-01-01怎樣用Javascript實(shí)現(xiàn)單例模式
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)單例模式,想學(xué)習(xí)設(shè)計(jì)模式的同學(xué),可以參考下2021-04-04window.open以post方式將內(nèi)容提交到新窗口
最近在做web項(xiàng)目,碰到需要跨頁(yè)面?zhèn)鬟f參數(shù)的功能,就是那種需要把當(dāng)前頁(yè)面的內(nèi)容帶到新開(kāi)的子窗體中,以前的做法是傳一個(gè)id過(guò)去,然后在新窗口中去讀數(shù)據(jù)庫(kù)的內(nèi)容;比較有意思的是直接通過(guò)調(diào)用form的submit方法不能觸發(fā)onsubmit事件,查看了幫助文檔,必須手動(dòng)的觸發(fā),否則只能看到頁(yè)面刷新而沒(méi)有打開(kāi)新窗口2012-12-12