如何优化input表单常见问题汇总，提升用户体验？

本文共计1322个文字，预计阅读时间需要6分钟。

input表单常见问题汇总.txt

1.当input框内容变化时的事件处理方法：

使用$(element).on('event', function() { ... }); 方式向被选元素添加一个或多个事件处理程序。

input表单常见问题汇总.txt

1.当input框内容改变的时候事件写法： bind() 方法向被选元素添加一个或多个事件处理程序 $('#money').bind('input propertychange',function(){} 2.在表单提交的时候使用if判断失败的判断要return false （虽然判断存在但是表单仍然提交） 3.表单处理的时候根据需要改善用户体验(比如在改变的时候进行判断) 4.表单按钮禁用伴随弹框（用户体验‘在空的时候不显示弹框’） 5.解决type="number" step="0.01"解决number类型的表单能够显示小数类型 6. required表单提交不能为空 7.表单提交常见选择符： （1）选择name属性是mobile的表单：$('input[name="mobile"]').val() （2）选择name属性是sex的表单并且带有checked属性： $("input[name='sex']:checked").val(); （3）多个checkbox的选择 //获取被选中的多选按钮的值 $('input[name="id"]:checked').each(function(){ imgid.push($(this).val()); }); 8. $('#form').submit();绑定表单的提交 （常用在想要弹框判断的时候） 9.focus()表单获取焦点 blur（）来判断表单失去焦点 10.解决ios系统渲染‘禁用表单’的样式 input[disabled]{ opacity: 1; -webkit-text-fill-color:#000; -webkit-opacity:1; } 11.手机自带的搜索换行，下一步，确认的keyCode码都是13可以写成事件 12.多选提交后台要用数组：name="type_id[]" 13.form表单上传图片需要：

ajxa上传图片需要：fd = new FormData($('#form')[0]); 且ajax对象中的属性需要有 processData: false,contentType: false,两个属性 和 data:fd 这是数据流的提交方式需要后端做处理。 php后端的参考写法（数据流上传图片） /** *上传图片操作 *@param string $picname *@return String $imgPath */ protected function uploadPic() { $upload = new \Think\Upload(); // 实例化上传类 $upload -> maxSize = 3145728; $upload -> rootPath = './Public/task_image/'; $upload -> savePath = ''; $upload -> saveName = array('uniqid', ''); //uniqid函数生成一个唯一的字符串序列。 $upload -> exts = array('jpg', 'gif', 'png', 'jpeg', 'mp4'); $upload -> autoSub = true; $upload -> subName = array('date', 'Ymd'); $arr = $upload -> upload(); $retrun = array(); if (is_array($arr)) { foreach ($arr as $k => $v) { $imgPath[] = "./Public/task_image/" . $v['savepath'] . $v['savename']; } $retrun = array('imgPath' => $imgPath); } if ($upload -> getError() == '上传文件后缀不允许') { $this -> Rerror('上传图片格式不支持'); } return $retrun; } 调用： $imgArr = $this ->uploadPic(); if(!$imgArr){ $this->Rerror('文件不能为空'); } if ($imgArr) { foreach ($imgArr['imgPath'] as $v) { $data['image'] = $v; } } 14.表单输入过程发生事件，如果不满足就清空表单（更好的用户体验） bind()为被选元素添加一个或多个事件处理程序(只要有一个事件触发即可) input()事件来监听文本框value值的改变 blur()：表单失去焦点的时候触发的事件 focus()：得到焦点时触发的事假 propertychange()只要当前对象的属性发生改变就会触发该事件(功能同oninput，用以替代oninput在IE9以下的不兼容性) $('#money').bind('input propertychange blur',function(){ if($('#money').val()>20000){ $('#money').val('') $('.weui-dialog__bd').text('单笔交易不能超过2W') $('#extract').attr('disabled','disabled') }else{ $('#extract').removeAttr('disabled','disabled') } }) 15.通过jq实现表单的数据动态变化（场景span中的值随着input的输入变化而变化） html代码： js代码： $('input').bind('input propertychange blur',function(){ $('span').html($('input').val()) }) 16.判断file是不是为空 直接判断input的file，如果value的长度为0，那么就空 ---------------------------------------------------------------------------------- 附录： input相关标签以及属性总结： 常用标签： 1.文本域： 2.密码： 3.单选按钮： Male 4.复选框： hjm 5.提交按钮: 等同于 6.重置按钮： 7.文本区域： 我是10行，30列。 8.下拉列表: nameage 9.上传文件： 10.隐藏传值： 11.数字框： 12.日期框： //格式为yyyy-mm-dd 13.邮箱框： //带有验证的邮箱地址 14.数字控件： //可用于调节音量大小（进度条） html5新增的表单 1.