如何利用原生JS實時監(jiān)聽input框輸入值
更新時間：2023年01月11日 09:26:28 作者：蘭亭古墨
這篇文章主要介紹了如何利用原生JS實時監(jiān)聽input框輸入值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
原生JS實時監(jiān)聽input框輸入值
原生JS中可以使用oninput,onpropertychange,onchange
oninput，onpropertychange，onchange的用法
1） onchange 觸發(fā)事件必須滿足兩個條件：
- a）當前對象屬性改變，并且是由鍵盤或鼠標事件激發(fā)的（腳本觸發(fā)無效）
- b）當前對象失去焦點(onblur)；
2） onpropertychange ，只要當前對象屬性發(fā)生改變，都會觸發(fā)事件，但是它是IE專屬的；
3） oninput 是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不同，它綁定于對象時，并非該對象所有屬性改變都能觸發(fā)事件，它只在對象value值發(fā)生改變時奏效。
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?請輸入字符：<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)聽值變化
<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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)表格的隔行變色和上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家簡單介紹了JavaScript中運算符的優(yōu)先級的相關(guān)問題，十分的實用，有需要的小伙伴可以參考下。2015-07-07
雖然Uniapp可以使用Vue.js自帶的$http,但也可以使用Axios,只需要在項目中進行簡單的配置,這篇文章主要給大家介紹了關(guān)于uniapp引入axios異步框架的相關(guān)資料,需要的朋友可以參考下2023-12-12
bootstrap表格內(nèi)容過長時用省略號表示的解決方法
這篇文章主要介紹了bootstrap表格內(nèi)容過長時用省略號表示的解決方法,需要的朋友可以參考下2017-11-11
當多個checkbox被選中時如何判斷是否有自己想要的，下面有段代碼，大家可以看看2014-09-09
這篇文章主要介紹了瀏覽器縮放檢測的js代碼,需要的朋友可以參考下2014-09-09
本文為大家詳細介紹下使用js完成節(jié)點的增刪改復(fù)制等的操作，具體的實現(xiàn)如下，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹了javascript實現(xiàn)點擊圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了javascript編程異常處理的方法,結(jié)合實例形式分析總結(jié)了JavaScript編程中異常處理的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了關(guān)于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-01-01