input输入框的onchange事件,要在 input 失去焦点的时候才会触发;

在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发;

onchange 事件也可用于单选框与复选框改变后触发的事件。

demo如下:

<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body> 输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当光标离开输入框后,函数将被触发,将小写字母转为大写字母。</p>
</body>

onchange事件兼容性

onchange event 所有主要浏览器都支持;

onchange 属性可以使用于:<input>, <select>, 和 <textarea>。

INPUT事件

oninput 事件在用户输入时触发,它是在元素值发生变化时立即触发;

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

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

     onpropertychange事件

     onpropertychange会实时触发,会在元素的属性改变时就触发事件。当元素disable=true时不会触发。
     缺陷:只在IE 下支持,其他浏览器不支持,用oninput来解决。
    

input输入框的input事件和change事件的更多相关文章

  1. input输入框的的input事件和change事件以及change和blur事件的区别

    input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...

  2. input事件与change事件

    输入框的change事件: 必须等到输入框失去焦点的时候才会触发,鼠标在空白的地方点一下: 输入框的input事件: 在输入内容变化的同时,实时的触发,不需要等到失去焦点.

  3. input输入框获得、失去焦点添加事件

    onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...

  4. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

  5. change事件和input事件的区别

    input事件: input事件在输入框输入的时候回实时响应并触发 change事件: change事件在input失去焦点才会考虑触发,它的缺点是无法实时响应.与blur事件有着相似的功能,但与bl ...

  6. vue中input输入框的模糊查询实现

    最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...

  7. input输入框限制(座机,手机号码)

    记录一下 座机input输入框: <input style="width:100px;" id="tel" type="text" o ...

  8. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  9. input输入框change和blur事件区别

    blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外. 1.没有进行任何输入时,不会触发change 在这种情况下失焦后, ...

随机推荐

  1. sqllocaldb

    创建实例  sqllocaldb create v12.0 启动实例 sqllocaldb start v12.0

  2. 关于python程序在VS code中运行时提示文件无法找到的报错

    经过测试,在设置文件夹目录时,可以找到当前目录下的htm文件,采用with open()语句可以正常执行程序,如下图. 而当未设置当前目录,直接用vscode执行该程序时,就会报错文件无法找到File ...

  3. 关于操作系统中英文切换的.po和.mo介绍

    一.文件简介 .po文件,.mo文件,.pot文件是由gettext程序生成或者使用的源代码和编译结果.   1..pot文件  是一种模板文件,其实质与.po文件一样,其中包含了从源代码中提取所有的 ...

  4. Django之ORM查询优化

    目录 only 和 defer select_related 和 prefetch_related ORM字段参数 choices res = models.Book.objects.all() # ...

  5. 转:linux中select()函数分析

    源地址:http://blog.csdn.net/zi_jin/article/details/4214359 Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱 ...

  6. centos7下Elasticsearch5.2.2和head 插件环境搭建

    ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进行数据索引 ...

  7. 《DSP using MATLAB》Problem 8.8

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  8. C#绘制渐变背景

    //绘制渐变色背景 Graphics g = e.Graphics; LinearGradientBrush linearGradientBrush = new LinearGradientBrush ...

  9. mysql的root用户被删除, MySQL 服务无法启动 1067错误

    本文出现的问题有: 1, root(localhost) 用户被删除; 2, 在关闭mysql服务过后, 无法启动,出现1067错误; 我使用的mysql版本为5.6; mysql的安装路径: C:\ ...

  10. 网络结构解读之inception系列三:BN-Inception(Inception V2)

    网络结构解读之inception系列三:BN-Inception(Inception V2) BN的出现大大解决了训练收敛问题.作者主要围绕归一化的操作做了一系列优化思路的阐述,值得细看. Batch ...