<!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. 如何设置 html 中 select 标签不可编辑、只读

    转载自: https://blog.csdn.net/hjm4702192/article/details/33729767 1. <select style="width:195px ...

  2. Java中使用webSocket

    Java中使用webSocket package com.yaoqi.controller.message; import javax.websocket.*; import javax.websoc ...

  3. Sublime Text3的快捷键和插件

    今天重装了一下Sublime Text3,发现了一个不错的网站,关于Sublime Text3的插件安装介绍的很详细,还有右键增强菜单和浏览器打开快捷键的创建.奉上链接 http://www.cnbl ...

  4. PHP开发搭建环境二：开发工具PhpStorm安装、激活以及配置

    关于php的开发工具很多,目前市面上最好用最强大的莫过于PhpStorm这款开发神器了,但是鉴于很多开发者朋友在网站上下载的PhpStorm开发工具不能用,或者使用起来很不方便,笔者把最好用的下载地址 ...

  5. 快速排序算法Java实现

    1) 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行 示例: package ...

  6. gcc常用语法

    1. gcc -E source_file.c-E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. g ...

  7. 神经网络的训练和测试 python

    承接上一节,神经网络需要训练,那么训练集来自哪?测试的数据又来自哪? <python神经网络编程>一书给出了训练集,识别图片中的数字.测试集的链接如下: https://raw.githu ...

  8. Color Length UVA - 1625 DP

    题目:题目链接 题意:输入两个长度分别为n和m的颜色序列,要求按顺序合并成同一个序列,即每次可以把一个序列开头的颜色放到新序列的尾部.对于每个颜色c来说,其跨度L(c)等于最大位置和最小位置之差,输出 ...

  9. 2-安装linux7

    1.操作系统简介 操作系统: 桌面操作系统 redhat fedora slackware ubuntu debian suse linux centos 服务器操作系统 linux redhat s ...

  10. sql server inser相关处理（添加一条，一次添加多条，Bulk插入多条）

    1,insert语句 insert into 表一(字段一,字段二,字段三) value(值一,值二,值三) 2,sql 插入多条语句,其中完整值之间用逗号分割 insert into 表一(字段一, ...