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的输入变化而变化）【用法等同14】
    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.