如何利用原生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ì)象屬性改變，并且是由鍵盤或鼠標(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)表格的隔行變色和上下移動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
淺談JavaScript中運(yùn)算符的優(yōu)先級(jí)
這篇文章主要給大家簡(jiǎn)單介紹了JavaScript中運(yùn)算符的優(yōu)先級(jí)的相關(guān)問(wèn)題，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
雖然Uniapp可以使用Vue.js自帶的$http,但也可以使用Axios,只需要在項(xiàng)目中進(jìn)行簡(jiǎn)單的配置,這篇文章主要給大家介紹了關(guān)于uniapp引入axios異步框架的相關(guān)資料,需要的朋友可以參考下2023-12-12
bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法
這篇文章主要介紹了bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法,需要的朋友可以參考下2017-11-11
多個(gè)checkbox被選中時(shí)如何判斷是否有自己想要的
當(dāng)多個(gè)checkbox被選中時(shí)如何判斷是否有自己想要的，下面有段代碼，大家可以看看2014-09-09
這篇文章主要介紹了瀏覽器縮放檢測(cè)的js代碼,需要的朋友可以參考下2014-09-09
使用js完成節(jié)點(diǎn)的增刪改復(fù)制等的操作
本文為大家詳細(xì)介紹下使用js完成節(jié)點(diǎn)的增刪改復(fù)制等的操作，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下2014-01-01
javascript實(shí)現(xiàn)點(diǎn)擊圖片切換
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
javascript編程異常處理實(shí)例小結(jié)
這篇文章主要介紹了javascript編程異常處理的方法,結(jié)合實(shí)例形式分析總結(jié)了JavaScript編程中異常處理的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了關(guān)于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-01-01