input 输入框对中文输入法的优化

参考：

实时监控用户输入—中文输入解决方案
input事件中文触发多次问题研究

$('input').on({
    keyup : function(e){        
        var flag = e.target.isNeedPrevent;
        if(flag)  return;     
        response() ;
        e.target.keyEvent = false ;
    },
    keydown : function(e){
        e.target.keyEvent = true ; 
    },
    input : function(e){
        if(!e.target.keyEvent){
            response()
        }        
    },
    compositionstart : function(e){
        e.target.isNeedPrevent = true ;
    },
    compositionend : function(e){
        e.target.isNeedPrevent = false;
    }
})
function response(){
        $('div').append('<p>事 件触发</p>')
}

通用表格 CheckBox 插件

/**
 * @file 通用checkbox
 * @author 
 */
$(function () {
    var selectedItemNum = 0;
    $(document).on('click', '.jq_checkbox', function () {
        var $this = $(this);
        $this.toggleClass('icon-checkbox-false icon-checkbox-true');
        if ($this.hasClass('jq_all_checkbox')) {
            var className = $this.hasClass('icon-checkbox-true') ? 'icon-checkbox-true' : 'icon-checkbox-false';
            if (className === 'icon-checkbox-true') {
                selectedItemNum = 0;
            }
            $('.jq_checkbox.jq_sub_checkbox').each(function () {
                if (className === 'icon-checkbox-true') {
                    $(this).removeClass('icon-checkbox-true icon-checkbox-false');
                    selectedItemNum++;
                } else {
                    $(this).removeClass('icon-checkbox-true icon-checkbox-false');
                    selectedItemNum--;
                }
                $(this).addClass(className);
            });
        } else {
            if ($this.hasClass('icon-checkbox-false')) {
                selectedItemNum--;
            } else {
                selectedItemNum++;
            }
            var $allCheckbox = $('.jq_all_checkbox');
            if (selectedItemNum === parseInt($allCheckbox.data('pageSize'), 10)) {
                $allCheckbox.toggleClass('icon-checkbox-false icon-checkbox-true');
            } else {
                if ($allCheckbox.hasClass('icon-checkbox-true')) {
                    $allCheckbox.toggleClass('icon-checkbox-false icon-checkbox-true');
                }
            }
        }
        if (selectedItemNum !== 0) {
            $('.jq_multi_status_btn').each(function () {
                $(this).addClass('active');
            });
        } else {
            $('.jq_multi_status_btn').each(function () {
                $(this).removeClass('active');
            });
        }
    });
});
function getSelectedItemVals(valueKey) {
    var arr = [];
    $('.jq_checkbox').each(function () {
        if ($(this).hasClass('icon-checkbox-false')) {
            return;
        }
        var id = $(this).data(valueKey);
        if (id !== undefined) {
            id = id.toString();
            arr.push(id);
        }
    });
    return arr;
}

select 默认值以及 placeholder

设置第一个 option 为默认值，如果不需要看到直接隐藏即可，相当于 placeholder 的效果。

<select name="levelSelect" id="levelSelect" class="jq_config_level level-select">
   <option value="" style='display:none' selected>请选择</option>
   <option value="1">低</option>
   <option value="2">中</option>
   <option value="3">高</option>
</select>
<i class="caret"></i>

但是设置的默认值，只会在其值不存在时生效，即使设置为 undefined 也不起作用，此时可以把默认值设置为：

<option value="null" style='display:none' selected>请选择</option>

后面只需要把这个控件的值设置为 null 即可。

原因是，表单的值都是字符串，当设置为 null 时，其会被转化为字符串 ‘null’，也就匹配上了默认值 ‘null’。

文件上传

文件的上传依赖于 Form 表单的直接提交，后台需要的是 Form data。而我们不再像是以往的通过表单提交来与后台交互，而是通过 Ajax 请求来完成。那么我们就应该自行制作表单数据。

原生 JS 提供了 FormData 类，可以创建我们所需的 Form data 数据。

使用方法很简单：

// 创建实例
let formdata = new FormData();
// 加入数据
formdata.append(key, value);
// 可以直接在创建实例时，传入表单，这样就会把表单中的字段都添加进去
new FormData($('#userForm')[0]);

那么文件的上传应该怎么去做呢？

我们使用原生的 input 控件：

<form enctype="multipart/form-data"> // 这个类型必须要加上，尝试过在 JQ 的 ajax 中添加为 content-type，后台接收不到，原生也许可以
    <input type="file" id="filename"> // 加上 multiple 为多选
</form>

当上传文件之后，这个元素对象中存储了文件信息。

let file = document.getElementById('filename');
formdata.append('file', file.files[0]);

file 类型控件中通过 files 存储文件信息。files 是一个数组，保存着多个信息。

之后，我们只需要把其他需要的信息放入 formdata 即可，然后把 formdata 传给后台。需要注意的是，要修改 content-type 为 false，processData 为 false。

原生 JS 实现参考：

function UpladFile() {
  var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
  var url =  "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址
  var form = new FormData(); // FormData 对象
  form.append("file", fileObj); // 文件对象
  xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
  xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
  xhr.onload = uploadComplete; //请求完成
  xhr.onerror =  uploadFailed; //请求失败
  xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
  xhr.upload.onloadstart = function(){//上传开始执行方法
      ot = new Date().getTime();   //设置上传开始时间
      oloaded = 0;//设置上传开始时，以上传的文件大小为0
  };
  xhr.send(form); //开始上传，发送form数据
}

JQ 参考：

$("#btn").click(function(){
  var formData = new FormData();
  formData.append("pic",document.getElementById("upfile").files[0]);
  $.ajax({
    type: "POST", // 数据提交类型
    url: "upfile.php", // 发送地址
    data: formData, //发送数据
    processData: false, // processData 必须设置为 false，不处理数据
    contentType: false
  });
});

阻止 input 输入框回车自动提交表单

输入框回车自动提交表单的情况有下面两种：

form 元素中，存在 button，且其 type = ‘submit’（注意，没有 type 时，默认值为 submit），存在一个或多个输入框回车，自动提交表单
form 元素中，只存在单个输入框，包含类型：text/email/password/number/url/search 等，无论 button 类型是什么，均为自动提交表单

解决方案：

使用 button 一定要写上类型为 button
在 form 表单或 input 中加入：onkeydown=”if(event.keyCode==13){return false;}” 事件阻止默认行为
增加一个隐藏的输入框 input=”text” display=’none’，注意不是类型为 hidden 的 input。

判断 checkbox radio 是否选中

使用原生 checked 属性：

Dom.checked; // 选中为 true, 否则为 false。非 checkbox 或 radio 为 false

使用 JQ 的 is(‘:checked’) 判断。

JavaScript