<!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>

js实时监听input中值得变化的更多相关文章

  1. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  2. 关于实时监听input的值得变化的问题

    onchange 关于input的onchange事件  其实是有出发条件的  并非实时监听的 1.鼠标点击事件  或者键盘事件(tab和wins键都可以触发  enter在ie9时不触发,火狐和ch ...

  3. js实时监听input中值的变化

    $(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...

  4. 使用jQuery实时监听input输入值的变化

    //jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...

  5. jq 实时监听input输入框的变化

    项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...

  6. jQuery实时监听input的值变化（input的值产生变化才会触发事件）

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

  7. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  8. 实时监听input输入的变化（兼容主流浏览器）【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  9. [转] 实时监听input输入的变化（兼容主流浏览器）

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

随机推荐

  1. 干货！一篇文章集合所有Linux基础命令，适合所有菜鸟学习和老手回顾！

    1 文件{ ls -rtl # 按时间倒叙列出所有目录和文件 ll -rt touch file # 创建空白文件 rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制) dos2u ...

  2. linux学习笔记二：三种网络配置

    本文引用自:https://www.linuxidc.com/Linux/2017-05/144370.htm [linux公社] VMware为我们提供了三种网络工作模式,它们分别是:Bridged ...

  3. 【PHP项目】【Smarty】Smarty截取字符串方法truncate

    smarty truncate 截取字符串  //在sql中truncate是删除表格(truncate是只删除内容,delete彻底删除)从字符串开始处截取某长度的字符,默认的长度为80指定第二个参 ...

  4. windows下使用curl.exe模拟ajax请求

    curl 是一般linux发行版中都带有的小工具,利用这个工具可以很方便的下载文件,我一般使用这个工具来查看某个页面相应的HTTP头信息,在Windows系统中我们也一样可以使用这个工具,如果不需要支 ...

  5. flask-login原理详解

    最近发现项目中使用的flask-login中有些bug,直接使用官网的方式确实可以用,但仅仅是可以用,对于原理或解决问题没有什么帮助,最近通过查看网上资料.分析源码.通过demo.从零开始总结了fla ...

  6. 两种查看SIP版本的方法python

    第一种:进入python命令行 print(sip.SIP_VERSION_STR) 注意对应的PyQt版本号和大小写 print(PyQt5.sip.SIP_VERSION_STR) 第二种:直接在 ...

  7. 3，版本控制git-多人协作

    如果你想获得一份已经存在了的 Git 仓库的拷贝,比如说,你想为某个开源项目贡献自己的一份力,这时就要用到 `git clone` 命令. 如果你对其它的 VCS 系统(比如说Subversion)很 ...

  8. jQuery的Ajax初识

    1. 什么是Ajax? Ajax是“Asynchronous Javascript And XML(异步Javascript和XML)”的缩写, 是指一种创建交互式网页应用的网站开发技术. Ajax不 ...

  9. laravel5.5中间件

    目录 1. 中间件知识 1. artisan 命令 2. 文件内容 3. 前置中间件和后置中间件 4. 使用中间件 2. 控制器中间件 1. 中间件知识 1. artisan 命令 php artis ...

  10. jquery取值赋值

    ("#A").val("1") id为A的值就是1了 jQuery中都这样,赋值的时候作为参数传给函数,和单纯的js有区别,像 $("#A" ...