如何利用原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值
更新時(shí)間：2023年01月11日 09:26:28 作者：蘭亭古墨
這篇文章主要介紹了如何利用原生JS實(shí)時(shí)監(jiān)聽(tīng)input框輸入值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
原生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-11
JS實(shí)現(xiàn)購(gòu)物車(chē)基本功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車(chē)基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家介紹了JavaScript稀疏數(shù)組與孔hole示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
JavaScript Base64 作為文件上傳的實(shí)例代碼解析
這篇文章主要介紹了JavaScript Base64 作為文件上傳的實(shí)例代碼解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
本篇文章主要是對(duì)tr的隱藏和顯示問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
JavaScript中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-04
以前我們說(shuō)的內(nèi)存泄漏，通常發(fā)生在后端，但是不代表前端就不會(huì)有內(nèi)存泄漏。特別是當(dāng)前端項(xiàng)目變得越來(lái)越復(fù)雜后，前端也逐漸稱為內(nèi)存泄漏的高發(fā)區(qū)。本文就帶大家了解一下Javascript的內(nèi)存泄漏2022-06-06
這篇文章主要介紹了使用 JavaScript 制作頁(yè)面效果,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
window.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