欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何利用原生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）當(dāng)前對象屬性改變，并且是由鍵盤或鼠標(biāo)事件激發(fā)的（腳本觸發(fā)無效）
  • b）當(dāng)前對象失去焦點(onblur)；

2） onpropertychange ，只要當(dāng)前對象屬性發(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)點擊按鈕復(fù)制內(nèi)容到剪切板

    原生js實現(xiàn)點擊按鈕復(fù)制內(nèi)容到剪切板

    這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)點擊按鈕復(fù)制內(nèi)容到剪切板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • JS實現(xiàn)購物車基本功能

    JS實現(xiàn)購物車基本功能

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)購物車基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • JavaScript稀疏數(shù)組與孔hole示例詳解

    JavaScript稀疏數(shù)組與孔hole示例詳解

    這篇文章主要為大家介紹了JavaScript稀疏數(shù)組與孔hole示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-06-06
  • JavaScript Base64 作為文件上傳的實例代碼解析

    JavaScript Base64 作為文件上傳的實例代碼解析

    這篇文章主要介紹了JavaScript Base64 作為文件上傳的實例代碼解析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2017-02-02
  • 淺析tr的隱藏和顯示問題

    淺析tr的隱藏和顯示問題

    本篇文章主要是對tr的隱藏和顯示問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-03-03
  • JavaScript中alert的使用方法超詳細(xì)介紹

    JavaScript中alert的使用方法超詳細(xì)介紹

    JS中的alert作用是在瀏覽器中彈出一個警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關(guān)于JavaScript中alert使用方法的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • 怎樣用Javascript實現(xiàn)單例模式

    怎樣用Javascript實現(xiàn)單例模式

    這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學(xué)習(xí)設(shè)計模式的同學(xué)，可以參考下
    2021-04-04
  • 一文搞懂JavaScript中的內(nèi)存泄露

    一文搞懂JavaScript中的內(nèi)存泄露

    以前我們說的內(nèi)存泄漏，通常發(fā)生在后端，但是不代表前端就不會有內(nèi)存泄漏。特別是當(dāng)前端項目變得越來越復(fù)雜后，前端也逐漸稱為內(nèi)存泄漏的高發(fā)區(qū)。本文就帶大家了解一下Javascript的內(nèi)存泄漏
    2022-06-06
  • 使用 JavaScript 制作頁面效果

    使用 JavaScript 制作頁面效果

    這篇文章主要介紹了使用 JavaScript 制作頁面效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-04-04
  • window.open以post方式將內(nèi)容提交到新窗口

    window.open以post方式將內(nèi)容提交到新窗口

    最近在做web項目，碰到需要跨頁面?zhèn)鬟f參數(shù)的功能，就是那種需要把當(dāng)前頁面的內(nèi)容帶到新開的子窗體中，以前的做法是傳一個id過去，然后在新窗口中去讀數(shù)據(jù)庫的內(nèi)容;比較有意思的是直接通過調(diào)用form的submit方法不能觸發(fā)onsubmit事件，查看了幫助文檔，必須手動的觸發(fā)，否則只能看到頁面刷新而沒有打開新窗口
    2012-12-12

最新評論