移动端开发遇到的问题之：表单

首次开发移动端，遇到的问题多多。

一、表单样式问题

表单本身有默认的样式，仅仅是去重置有时候还是会有问题，比如ios。。。这次做微信的快乐男声报名表就出现了各种问题，由于第一次做表单的东西，还是在移动端，只有自己各种查资料。

问题一：输入框要求光标是红色，ios的就是改不了光标颜色。后来查了下说由于ios系统原因，改不了输入光标的颜色，这个最后也妥协了，项目时间赶不上了。下次再做表单，坚决自己写所有样式，表单的元素都隐藏，用其它元素模拟，因为不只是输入光标有问题

问题二：输入框和按钮默认都是圆角，这个还好解决，设置border-radius: 0就可以了，但是按钮的圆角没有解决。。。

问题三：提交按钮的默认样式（圆角）怎么也去不掉，颜色显示一直不对。怎么对它样式重置后来在网上查到ios按钮的重置要使用

input[type="submit"],
 input[type="reset"],
 input[type="button"],
 button { -webkit-appearance: none; }

但是颜色还是显示不对，实在折腾不出来了，把表单的提交按钮改成了div取去实现，其实不想改，想html规范点用，因为前面输入框什么的都是用的表单元素，就想统一一点，强迫症啊！！！但是从另一个方面来说，遇到问题确实需要点灵活性，这次我就忍了吧，还是那句话，遇到表单再也不要用表单元素去做样式，全部隐藏用其它元素模拟。

二、表单提交问题

（1）用户头像预览问题

 <img class="head-img none" id="head_img"><!--无src时隐藏图片，不然有去不掉的边框-->
      <!--头像数据-->
    <input type="file" name="header_img" id="header_img" class="head-inp" form="data_form">

这里把图片和按钮做得完全一样，其实它们外面还有个容器，因为img无src时不隐藏它就会有边框，这个是去不掉的，只有隐藏。然后表单也是设置成透明的，所以就在容器元素上设置了一个背景让用户知道在哪里点击上传头像。

第一次点击上传，perfect。

但是我想替换头像，再点击上传，预览的时候就出问题了

 

原因查到了，是这个img的class名字符串最后一个字母不知道为什么不见了，导致样式解析出错。现在也还不知道为什么，网上各种搜也没有搜到类似的现象，有大神遇到过或者知道原因的麻烦解释一下，自己想了个很简陋的解决办法——在预览时重写这个img的class名。

（2）上传视频时要是点击同样的视频，不会触发onchange

input的type是file时，利用dom对象的onchange事件可以监听文件的上传。但是onchange只会在对象的内容发生改变的才会触发，当时没有注意到这个问题，不知道为什么点击同一个视频上传没有反应，后来查资料才知道得清除掉对象的value值再传相同的文件才会触发onchange。所以在上传的回调函数里将对象的value置空了。

（3）用formdata对象提交表单数据

因为提交按钮改成了div，所以只有自己去手动写提交的东西。这次使用了html5中的formdata对象，当时提交的时候打断点检查数据是否正确，但是却发现这个对象是空的！！！！！然后又用append去添加数据，结果还是空。确认自己确实按照文档说的那样操作这个对象的之后开始又一顿搜，终于知道这个对象，不管是表单的数据还是后来添加的键值对，你在控制台看到的是FormData原型，存储的数据没有以对象属性的方式体现，可以理解为类的私有字段，外界访问不到，但是可以通过formData.get(key)的方式获取到对应的表单数据。这个对象提交数据和form表单提交数据是一样 。

（4）表单的验证样式

由于浏览器不同，表单验证提示的样式也不统一，而且一般情况下产品都会修改表单验证的提示样式，所以不会用上htlm5中的各种现成的样式，还是老老实实的写验证的代码吧，当然一些可以利用的限制条件还是可以用的。