<!DOCTYPE html> <html> <head> <title>zepto</title> <meta name="name" content="content"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style> html,body { margin: 0; padding: 0; font-size: 62.5%; } .wrap { margin: 20px auto; width: 500px; height: 300px; background: #eee; } .word-area ul, .input-area ul{ list-style: none; } .word-area label, .input-area label{ float: left; margin-top:1.2rem; width: 60px; height: 30px; text-align: left; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #2c2828; } .input-area input { width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 6px; margin-top: 1.2rem; margin-left: 2rem; padding: 2px 6px; line-height: 30px; } .word-area p { display: inline-block; border: 1px #00bcd4 solid; margin: 1.2rem 0 0 2rem; padding: 2px 6px; width: 200px; height: 30px; font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; font-size: 1rem; line-height: 30px; background: #fff; } .word-area p:hover{ cursor:not-allowed; } </style> </head> <body> <div class="wrap"> <div class="input-area"> <ul> <li> <label>输入框 1:</label> <input type="text" oninput="setShowValue(this,'wordOne');" onporpertychange="setShowValue(this,'wordOne');"> </li> <li> <label>输入框 2:</label> <input type="text" oninput="setShowValue(this,'wordTwo');" onporpertychange="setShowValue(this,'wordTwo');"> </li> </ul> </div> <div class="word-area"> <ul> <li> <label>显示框 1:</label> <p id="wordOne"></p> </li> <li> <label>显示框 2:</label> <p id="wordTwo"></p> </li> </ul> </div> </div> <script type="text/javascript"> function setShowValue(self,obj) { var value=self.value; document.getElementById(obj).innerHTML=value; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <h1 > 实时监测input中值的变化 </h1> <input type="text" id="username" autoComplete='off'> <div id="result"></div> <div id="value"></div> <script src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ $('#username').bind('input propertychange', function() { $('#result').html('输入的值长度是： ' + $(this).val().length + ' characters'); $('#value').html('输入的值是： ' + $(this).val()); }); }); </script> </body> </html>