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. npm淘宝镜像配置

    npm config set registry https://registry.npm.taobao.org

  2. Python-数据分析模块

    目录 numpy 模块 matplotlib 模块 pandas 模块 numpy 模块 numpy 模块主要用来做数据分析,对numpy数组 进行科学运算 主要方法和常用属性,都是用numpy 生成 ...

  3. 在自己的工程中使用开源界面库Duilib

    配置duilib库 一个简单的使用Duilib程序一般要在stdafx.h中进行配置(链接duilib的文件,包括头文件).通常的配置代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  4. HTTP的九种请求方法

    HTTP1.0定义了三种请求方法:GET.POST.HEAD HTTP1.1定义了六种请求方法:PUT.DELETE.PATCH.OPTIONS.CONNECT.TRACE 1.get 请求指定页面的 ...

  5. js图片预加载实现!

    var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...

  6. iOS界面动画特效

    1.TableView的headView背景图片拉伸 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup aft ...

  7. Python学习day36-并发编程(2)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  8. python 创建txt每行写入

    txtPath=os.path.join(vocDir,"eval.txt") with open(txtPath,"w") as f: f.writeline ...

  9. mybatis配合pagehelper分页助手查询

    Maven: 参考: springBoot2.x整合pagehelper5.1.2:https://blog.csdn.net/Carlson_Chis/article/details/8563748 ...

  10. 定时运行某个php文件的bat文件

    1.bat C:\phpStudy\php54n\php.exe -q D:\WWW\wdysp.zhuwangkj.com\wap\user_ABCD_grade.php pwd=6666sqwdw ...