首页 > 其他分享 >关于input 内容改变的触发事件

关于input 内容改变的触发事件

时间:2022-09-24 21:13:09浏览次数:78  
标签:function 触发 JS 改变 事件 input event

转自:https://blog.csdn.net/qq_36908872/article/details/115528600  https://blog.csdn.net/weixin_45947938/article/details/122405448  方便以后自己寻找资料更加方便。

1. onchange

onchange 事件会在域的内容改变时触发。支持的标签<input type="text">, <textarea>, <select>,<keygen>。

注意:在元素的值改变了且失去焦点时触发(两次的值一样不会触发)。

缺陷:通过js代码改变DOM的值不会触发,解决在js代码里改值了调用其change 的function() 或者调.change()方法。

JS:

<input type="text" id="cc" onchange="function()">

JQuery:

$("#cc").change(function(){});

2. onpropertychange

onpropertychange会实时触发,会在元素的属性改变时就触发事件。当元素disable=true时不会触发。

缺陷:只在IE 下支持,其他浏览器不支持,用oninput来解决。

JS: 

<input type="text" id="cc" onpropertychange="functionName()">

3. oninput

oninput在<input>或<textarea>的值发生改变时触发,不需要等到元素失去焦点,是实时的。它是HTML5的事件,可用于检测文本类输入框的值。

缺陷:从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9 以下不支持,所以IE9以下可用onpropertychange 事件代替。
JS:

<input type="text" oninput="functionName()">

JQuery:

$("#cc").on('input propertychange',functionName); 
通过下面这种方式获取值 event.target.value就是当前文本框输入变动后的值 function OnInput (event,obj) { if(event.target.value <0 event.target.value >100)   {   alert("t1输入的数据必须介于【1,100】范围内");   } }

4. addEventListener

addEventListener()用于向指定元素添加事件方法。使用removeEventListener()移除添加的事件方法。IE9以下不支持,用attachEvent代替。

语法: element.addEventListener(event, function, useCapture)

————————————————
版权声明:本文为CSDN博主「张某某啊哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_36908872/article/details/115528600

标签:function,触发,JS,改变,事件,input,event
From: https://www.cnblogs.com/LoveQin/p/16726607.html

相关文章

  • JavaScript 计时事件
    做一个在设定的时间间隔之后来执行代码,称为计时事件两个关键字:setInterval()-间隔指定的毫秒数不停地执行指定的代码setTimeout()-在指定的毫秒数后执行指定代码。......
  • 点击事件和路由跳转
     工作常用的点击事件1.@click="goDetail"2.在方法中使用 methods:{//跳转到登录页   goDetail(){     this.$router.push("/login")   ......
  • asyncio的事件循环的替代方案
    1、参考来源https://github.com/MagicStack/uvloop2、环境要求不支持Windows系统3、安装模块pip3installuvlooppip3install-Upip4、引用的示例1impo......
  • Python使用事件循环创建线程池和进程池
    1、来源参考参考官方文档示例:https://docs.python.org/3.9/library/asyncio-eventloop.html#asyncio.loop.run_in_executor2、代码示例1#-*-coding:utf-8-*-2......
  • Vue父子组件生命周期触发顺序是怎样的?
    挂载阶段父beforecreated->父created->父beforemounted->子beforecreated->子created->子beforemounted->子mounted->父mounted更新阶段父beforeUpdate->子beforeUpda......
  • echarts图表(二),x轴label加点击事件
      如图,想要做可以点击轴label,触发后续事件,上代码:constref=useRef()consteChartInstance=useRef<any>()eChartInstance.current.on('click',function(par......
  • Redis服务端事件处理流程分析
    一、事件处理1.1什么是事件Redis为什么运行得比较快?原因之一就是它的服务端处理程序用了事件驱动的处理方式。那什么叫事件处理?就是把处理程序当成一个一个的事件处......
  • Vue中的事件修饰符
    Vue中的事件修饰符:1、prevent:阻止默认事件(常用)2、stop:阻止事件冒泡(常用)3、once:事件只触发一次(常用);4、capture:使用事件的捕获模式;5、self:只有event.target是当前操作的......
  • JavaScript HTML DOM 事件
    对事件做出反应:当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交HTML表单时当用户触发按键时用户点击改变内容:......
  • 【Hive】FAILED: ParseException line 24:17 extraneous input ';' expecting EOF nea
    在hive命令中执行如下DDLCREATETABLEstore_test(idbigintcomment"PK",store_name_cnstringcomment"storename",......