原生input和onchange

2024年4月23日 122次阅读 来源: 长空

简单是：input中输入id值(可以输多个，类似12,13,14)

ps: 还是觉得让用户选，比用户输合适

不过没办法，开始做。先认识一下原生的onchange，其实际意义并不是输入改变就会监听到，而是onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效

ps: react中的onchange很幸福

那使用onkeydwon，onkeyup怎么样？onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善

那么解决方式是：onpropertychange or oninput

onpropertychange是ie专属，可满足实时修改的需求。
oninput是html5的专属属性，ie9以下不支持。

ps: 直接使用oninput就行

代码：

<body>
    <input type="text" id="name" oninput="handleChange()">
</body>
<script>
var tempName = '';
function handleChange(){
    console.log('aaaddd');
    var name = $("#name").val();
    var reg = /^([0-9],?)*$/;
    var result = reg.test(name);
    if(result){
        tempName = name;
    }else{
        $("#name").attr("value",tempName);//填充内容
    }
    
}
</script>

参考文章：
总结oninput、onchange与onpropertychange事件的用法和区别

    原文作者：长空
    原文地址: https://segmentfault.com/a/1190000010925127
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞