如何利用原生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);
? ? ? }
? }總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了原生js實現(xiàn)點擊按鈕復制內容到剪切板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)購物車基本功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家介紹了JavaScript稀疏數(shù)組與孔hole示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
JavaScript Base64 作為文件上傳的實例代碼解析
這篇文章主要介紹了JavaScript Base64 作為文件上傳的實例代碼解析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
本篇文章主要是對tr的隱藏和顯示問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JS中的alert作用是在瀏覽器中彈出一個警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關于JavaScript中alert使用方法的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學習設計模式的同學，可以參考下2021-04-04
以前我們說的內存泄漏，通常發(fā)生在后端，但是不代表前端就不會有內存泄漏。特別是當前端項目變得越來越復雜后，前端也逐漸稱為內存泄漏的高發(fā)區(qū)。本文就帶大家了解一下Javascript的內存泄漏2022-06-06
這篇文章主要介紹了使用 JavaScript 制作頁面效果,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
最近在做web項目，碰到需要跨頁面?zhèn)鬟f參數(shù)的功能，就是那種需要把當前頁面的內容帶到新開的子窗體中，以前的做法是傳一個id過去，然后在新窗口中去讀數(shù)據(jù)庫的內容;比較有意思的是直接通過調用form的submit方法不能觸發(fā)onsubmit事件，查看了幫助文檔，必須手動的觸發(fā)，否則只能看到頁面刷新而沒有打開新窗口2012-12-12