最近项目中使用了一些关于onchange事件的ajax请求,有时候测试人员会根据浏览器缓存的表单下拉框中选择填入的数据,这样onchange事件就不被触发了
方案一:将onchange事件修改为blur事件,但是这样会引起很多不必要的动作,弃之
方案二:使用autocomplete="off"属性,将表单但缓存功能关闭,这样就可以强迫测试人员每次手动输入,虽说不太友好,但是直接解决问题了,被需求选中。
方案三:使用onpropertychange,这个是onlyIE,在fierfox下使用需要用oninput属性,且需要用addEventListener来注册事件,只要value发生变化就会触发,该属性配合文件表单可以做上传文件图片预览,字数统计等等
统计字数:
上传图片本地预览:
方案一:将onchange事件修改为blur事件,但是这样会引起很多不必要的动作,弃之
方案二:使用autocomplete="off"属性,将表单但缓存功能关闭,这样就可以强迫测试人员每次手动输入,虽说不太友好,但是直接解决问题了,被需求选中。
方案三:使用onpropertychange,这个是onlyIE,在fierfox下使用需要用oninput属性,且需要用addEventListener来注册事件,只要value发生变化就会触发,该属性配合文件表单可以做上传文件图片预览,字数统计等等
统计字数:
<div id="msg"></div>
<input id='txt' value="" />
<script>
//当状态改变的时候执行的函数
function handle()
{document.getElementById('msg').innerHTML='输入的文字长度为:'+document.getElementById('txt').value.length;
}
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
if(/msie/i.test(navigator.userAgent)) //ie浏览器
{document.getElementById('txt').onpropertychange=handle
}
else
{//非ie浏览器,比如Firefox
document.getElementById('txt').addEventListener("input",handle,false);
}
</script>
上传图片本地预览: