<!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.vi命令 1.光标移动到文件的最后一行 G     :$     ]] 2.光标移动到文件的第一行 :0     gg     [[ 3.从光标所在位置将光标移动到当前行的开头 0     ^   ...

  2. Java高并发之同步异步

    1.概念理解: 2.同步的解决方案: 1).基于代码 synchronized 关键字 修饰普通方法:作用于当前实例加锁,进入同步代码前要获得当前实例的锁. 修饰静态方法:作用于当前类对象加锁,进入同 ...

  3. Ansible学习 Playbooks_1

    Playbooks是Ansible中执行较复杂任务的一种的方式,Playbook由1个或多个play组成,语法格式是YAML,下面以一个简单的任务为例,开始我们的Playbook学习: 任务描述: 1 ...

  4. ethereum(以太坊)(十二)--应用(二)__投票(基础总和)

    编写应用合约之前,先弄清它的逻辑,有助于我们更好的部署合约 pragma solidity ^0.4.21; pragma experimental ABIEncoderV2; contract vo ...

  5. 《Python语言及其应用》学习笔记

    第二章 ========== 对象的类型决定了可以对它进行的操作.对象的类型还决定了它装着的数据是允许被修改的变量(可变的),还是不可被修改的常量(不可变的). Python是强类型的,你永远无法修改 ...

  6. 裸机——I2C

    网上搜了些资料,碍于智商和基础,看不懂, 只有将S5PV210 数据手册关于I2C的部分,翻译记录下,留到以后用. 1.OVERVIEW The S5PV210 RISC microprocessor ...

  7. [BZOJ3631][JLOI2014]松鼠的新家(树链剖分)

    [BZOJ3631] 树剖模板题了, Code #include <cstdio> #include <algorithm> #define MID int mid=(l+r) ...

  8. 18,Shell编程实战

      为什么要学习Shell编程 Shell脚本语言是实现Linux/Unix系统管理及自动化运维所必须的重要工具,Linux系统的底层以及基础应用软件的核心大都涉及Shell脚本的内容. 一个合格的L ...

  9. Android stadio Switch repository Android stadio切换仓库

    Android stadio 有时候,有很多module. 这些module 都有自己的仓库.也就是不在一块.那么,Android stadio 默认管理的就是根git. 如图,画对号的就是默认的. ...

  10. Eclipse 窗口说明---Eclipse教程第03课

    Eclipse 工作台(Workbench) 首先,让我们来看一下Eclipse 作台用户界面,和它里面的各种组件. 工作台是多个窗口的集合.每个窗口包含菜单栏,工具栏,快捷方式栏,以及一个或者多个透 ...