input输入框内容实时监测(附代码)

输入框内容实时监测！只有输入框内容发生改变才会触发事件，如果输入框内容没有改变则不会触发该事件！

代码如下：

<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
 function OnInput (event) {
  alert (event.target.value);
 }
 function OnPropChanged (event) {
  if (event.propertyName.toLowerCase () == "value") {
   alert (event.srcElement.value);
  }
 }
</script>
<form>
 用户名:<input name="user" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"/>
</form>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持!

赞 (0)

相关推荐

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • js监听输入框值的即时变化onpropertychange、oninput

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元

  • jquery 实时监听输入框值变化的完美方法(必看)

    jquery 实时监听输入框值变化的完美方法(必看)

    只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', function() { //获取.input-form下的所有 <input> 元素,并实时监听用户输入 //逻辑 }) 以上代码在因为用的bind,所以当遇到追加的新input标签时,则不能监听了. 如下情景: 由上图可以看到189和135号码是可以监听的,但是新追加的178和188则无效.

  • input输入框内容实时监测(附代码)

    输入框内容实时监测!只有输入框内容发生改变才会触发事件,如果输入框内容没有改变则不会触发该事件! 代码如下: <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> function OnInput (event) { alert (event.target.value); }

  • jquery对输入框内容的数字校验代码实例

    这篇文章主要介绍了jquery对输入框内容的数字校验代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接在input属性框中添加keyup事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js&quo

  • vue input输入框模糊查询的示例代码

    vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • input输入框的自动匹配(原生代码)

    今天看群里有人发起了人人网以前一些面试题,我以前也转载过一些,恰好闲着,挑选一题来做做,练个手. 本题有以下要求: 1. 使用原生代码实现,不可使用任何框架: 2. 对 input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方: 3. 只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗: 4. 通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中: 思 路 捕捉输入变化,用用户输入的值(下称输入值)去匹配列表项,这里假设列表项是查询

  • 解决Vue input输入框卡死的问题

    解决Vue input输入框卡死的问题

    原因 我把 vuex 全局变量 $store.state.search.key 绑定到 v-model 上,然后在页面挂载时通过代码修改 $store.state.search.key 的值,最后在页面上输入任意值 input 框就卡住了 解决方法 1.input 标签增加 @input 属性 <input v-model='$store.state.search.key' @input="forceUpdateInput"> 2.methods 中增加对应方法 force

  • Vue通过字符串关键字符实现动态渲染input输入框

    目录 问题描述 { xxx } 标识字符渲染Dom 组件设计 组件开发 重点 输入完成事件 动态编辑文本 今天做一个简单的demo,就是有一个字符串,字符串里面有标识符,前端检测到标识符之后,需要将这个标识符转换成一个 input 输入框并且进行数据输入和绑定功能. 问题描述 就比如现在有这样一个字符串: 你好,我是{name},我今年{age} 岁,我喜欢的运动是{play}. 前端需要把 {xxx} 及其包裹的内容转变成一个输入框渲染出来,并且呢,当在输入框输入数据的时候,需要对输入的内容进

  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

  • Element Input输入框的使用方法

    本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/input 基础用法 带图标的输入框(属性方式) <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"> </el-input> <el-input placeholder="请输入内容&q

  • 解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

  • Vue组件封装之input输入框实战记录

    目录 实战目的 实战效果 核心思想 一 格式规范 二 给父组件传递value值 三 错误提示 四 格式检验 五 多个input框的检验 写在最后 实战目的 封装一个自定义的input组件,只适用于 input元素type属性为text或password. 实战效果 核心思想 准备: 需要两个文件,分别为 register.vue(父组件), input.vue(子组件) register.vue 引入 input.vue import inputstyle from '@/components/

随机推荐