Home > Web Front-end > HTML Tutorial > HTML 中input输入内容即时计算事件_html/css_WEB-ITnose

HTML 中input输入内容即时计算事件_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:08:27
Original
1506 people have browsed it

 <!DOCTYPE html><html> <head>  <meta charset="utf-8">  <meta name="auther" content="fq" />  <title>监听输入框值的即时变化 onpropertychange oninput</title>  <script type="text/javascript">   function immediately() {    var element = document.getElementById("mytext");    if ("\v" == "v") {     element.onpropertychange = webChange;    } else {     element.addEventListener("input", webChange, false);    }  function webChange() {     if (element.value) {      document.getElementById("test").innerHTML = element.value     };    }   }  </script> </head> <body>  <input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />  <div>您输入的值为:<span id="webtest">还未输入</span></div>  <br />  <br />  <br />  <br />  <br /> 写在JS中的示例:  <input type="text" name="textfield" id="mytext" />  <input type="number" name="" id="" min="0" max="1"/>  <div>您输入的值为:<span id="test">还未输入</span></div>  <script type="text/javascript">   immediately();  </script> </body></html>
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template