HTML 中input输入内容即时计算事件

 <!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>
时间: 2024-12-24 21:24:08

HTML 中input输入内容即时计算事件的相关文章

正则表达式控制Input输入内容 ,js正则验证方法大全

https://blog.csdn.net/xushichang/article/details/4041507 正则表达式控制Input输入内容 2009年04月01日 17:15:00 阅读数:21747 不能输入中文 <input type="text" name="textfield"  onkeyup="this.value=this.value.replace(/[^/da-z_]/ig,'');"/>只能输入 数字和下划

文本框输入内容立即触发事件

1.当输入内容时,立即触发某事件,宜用onkeyup,onchange会有延时. 2.jsp页面中常用的触发方法有: onchange .onkeyup .onblur 3.js中一般去掉on,例如 //自动检索 $("#resetSearch").keyup(function(){ var name = $("#resetSearch").val(); $("#projectListPanel").load(url,function(){ re

关于隐藏input输入内容问题

如果想通过获取焦点输入改变内容,type不能是hidden的 <input type="hidden" id="test"> // 这种是不行的,只能赋值 .val()修改: <input type="type" id="test2"> // 想修改input框内容的需要type="text" 样式隐藏不能用display:none 和 visibility:hidden,因为这样写

限制&lt;input&gt;输入内容 只允许数字 或者 字母

只能输入数字: 有回显 <input onkeyup="value=value.replace(/[^\d]/g,'')"> 只能输入数字:无回显 <input id="Text1" type="text" onkeypress="return IsNum(event)" /> <script language="javascript" type="text/java

element table 在表格外的input输入内容实时过滤搜索表格内容显示

<template> <div class="table"> <div class="search-Box"> <el-input placeholder="请输入关键字" icon="search" class="search" v-model="search"></el-input> </div> <el-

input 框输入内容延时1秒请求内容

项目中有个功能需要对话框输入内容后1秒执行请求获取模糊查询内容,为什么不即时查询呢?因为模糊查询东西很多呀,实时查询太耗性能了,所以改成当用户停止输入 1 秒后,再对用户输入的内容进行请求模糊查询. 实现起来其实很简单,定时器,设置1秒的请求,如果内容改变再1秒内,那么就清空,1秒后则自动执行请求. 下面来看demo: <div ng-controller='myCtrl'> <input ng-model="iValue" ng-change="value

使用iScroll时,input等不能输入内容的解决方法(share)

最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFormsInIscroll(){ [].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){ el.addEventListener(('ontouchstart' in window)

点击GridView中TextBox弹出输入对话层,输入内容反传回先前点击的TextBox中(Jquery获取GridView中TextBox的ID)

项目中,由于用户反映说:GridView表中的输入框太小,不方便输入,特别是在输入内容多的时候.问能不能点击GridView中输入框的时候能弹出一个大的内容输入对话框. 介于用户的要求,我就开始修改. 先想到的就是我用Jquery在GridView中TextBox上添加一个focus焦点捕捉事件,当点击时触犯弹出内容输入框. 然后就是当输入完毕的操作了,我又使用内容输入框(其实也是一个TextBox)的焦点失去事件(blur),在该事件中先把值反馈回先前点击的GridView中的那个TextBo

IOS中input键盘事件keyup 的兼容解决办法

用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件去代替keyup. eg: var bind_name = 'input';if (navigator.userAgent.indexOf("MSIE") != -1) { bind_name = 'propertychange';}(此处是为了兼容IE)if(navigator.user