.vue文件其实是一个组件，关于它的说明我之前也写过一篇文章，地址： .vue文件，今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中，改变input的值，就调用一个事件，第一想到的是oninput。
oninput 事件在用户输入时触发，菜鸟教程中的用法是：

但是在.vue中这样写是没有作用的：

<input type="text" id="cardsNum2"  value="1" @oninput ="inputFunc">

这样写也没有作用：

<input type="text" id="cardsNum2"  value="1" v-on:oninput ="inputFunc">

最后，这样写才起作用：

<input type="text" id="cardsNum2"  value="1" v-on:input ="inputFunc">

希望这篇文章对您有所帮助！
个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！

作者：陈大鱼头
github： KRISACHAN


<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whatwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。
本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过多的基础说明~

没想到，这些选择器居然跟 input …

到写文章为止，根据最新的 drafts 指出，一共有3大类，16种跟 input 相关的选择。其实都挺有用的，善用它们，会让我们的用户体验更加美好。

下面我们来分享一下这3大类选择器的作用：

第一类：控制系（Input Control States）




选择器
作用




:enabled
选择可使用状态的 <input /> 元素


:disabled
选择不可使用状态的 <input /> 元素


:read-only
选择不可编辑状态的元素（不仅仅是 <input /> ）


:read-write
选择可编辑状态的元素（不仅仅是 <input /> ）


:placeholder-shown
选择 placeholder text 显示时的元素


:default
选择在 <button>，<input type="checkbox" />， <input type="radio" />, 以及 <option> 上的默认状态


第二类：输出系（Input Value States）




选择器
作用




:checked
选择处于选中状态的 <input type="radio" />


:indeterminate
选择状态不确定的表单元素与 <progress>


第三类：侦查系（Input Value-checking）




选择器
作用




:blank
选择处于空值时的 <input>，暂未被浏览器支持


:valid
选择验证通过的表单元素


:invalid
选择验证不通过的表单元素


:in-range
选择处于指定范围内的 <input />


:out-of-range
选择不处于指定范围内的  <input />


:required
选择必填的表单元素


:optional
选择选填的表单元素


:user-invalid
选择用户输入但值非法时的 <input />，暂未被浏览器支持


可怕，除了选择器，居然还跟这些属性有关系
<input> 除了有很多相关的选择器，结合不同的type还有不同的属性可以供使用。他们的作用如下：




属性
作用




maxlength
可输入的最大长度


minlength
可输入的最小长度


size
输入框的长度


readonly
输入框是否只读


required
输入框是否必填


multiple
输入框是否可以多选


pattern
输入框验证规则


min
可输入的最小值


max
可输入的最大值


step
输入框每次的增量


list
输入框绑定的可选值数据


placeholder
输入框预选文字


实战
通过上面的三类说明，我们大致了解了 <input /> 标签的相关信息，但是你们以为我是来列list的吗？
当然不是，还有实操啊~

纯CSS实现表单提交功能
首先我们来看个效果图

上面的效果就是一个纯CSS实现的表单提交功能，这是怎么实现的呢？下面我们直接看源码，然后一步一步地来分拆（不想看的可以直接CV下面的源码自己做测试~）
<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
    input[type="text"]:invalid ~ input[type="submit"],
    input[type="password"]:invalid ~ input[type="submit"] {
      display: none;
    }
    input[required]:focus:invalid + span {
      display: inline;
    }
    input[required]:empty + span {
      display: none;
    }
    input[required]:invalid:not(:placeholder-shown) + span {
      display: inline;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">
    账号：
    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
    <span class="f-tips">请输入正确的账号</span>
    <br />
    密码：
    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
    <span class="f-tips">请输入正确的密码</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>

第一步：写好基础结构
首先我们来把基础结构给写好，代码如下：
<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">
    账号：
    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
    <span class="f-tips">请输入正确的账号</span>
    <br />
    密码：
    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
    <span class="f-tips">请输入正确的密码</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>

扫一眼，嗯，挺简单的，都是常用的东西。咦，不对，这个 pattern 是什么东西？
在这里我们重点分享下 pattern 这个属性，这是一个用来验证 input[value] 是否合法的属性，里面的内容就是匹配value的，语法便是正则的语法，例子如下：
<label>
    <!--
	当前pattern的内容就是验证input[name="part"]的value的，其规则如同里面的正则一样，匹配input[name="part"]的value是否是一个数字+3个大写字母
	-->
    <input pattern="[0-9][A-Z]{3}" name="part" />
</label>

当然，不同的 input[type] 也会默认带有相应的 pattern ，例如 input[type="email"] 就是默认匹配了以下规则：
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

第二步：重点功能
input[type="text"]:invalid ~ input[type="submit"],
input[type="password"]:invalid ~ input[type="submit"] {
    display: none;
}
input[required]:focus:invalid + span {
    display: inline;
}
input[required]:empty + span {
    display: none;
}
input[required]:invalid:not(:placeholder-shown) + span {
    display: inline;
}

上面便是核心交互的实现。
首先第一个class就是保证了在两个输入框不通过的时候隐藏，就是当输入框值为空或者不符合验证规则，则隐藏提交按钮。
第二个，第三个class则是控制当用户在输入框输入内容时，如果不符合验证规则，则显示错误信息，否则则隐藏。
第四个class则是用过 placeholder 是否存在来控制错误信息的显隐，如果 placeholder 不显示，则证明用户正在输入，错误信息则根据用户输入的值来判断是否显隐，否则则隐藏。
状态切换
上面我们有提到一个选择器 :indeterminate ，这个是用于选择状态不确定的表单元素与 <progress> ，玩过扫雷的人都知道，右击除了可以选择红旗，还可以选择问号，就是选中，但不确定；又跟 promise 的 pending 状态类型，介于 resolve 与 reject 之间。
多了 :indeterminate 会给我们带来很多很有趣的体验。
首先我们来看看它的使用案例。
基础使用法
先看效果

代码如下：
<style>
    body {
        background: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    input {
        margin-right: .25em;
        width: 30px;
        height: 30px;
    }
    label {
        position: relative;
        top: 1px;
        font-size: 30px;
    }
</style>
<form>
    <input type="checkbox" id="checkbox">
    <label for="option">点击左边</label>
</form>
<script>
      'use strict';
      checkbox.addEventListener('click', ev => {
        if (ev.target.readOnly) {
          ev.target.checked = ev.target.readOnly = false;
        } else if (!ev.target.checked) {
          ev.target.readOnly = ev.target.indeterminate = true;
        };
      });
</script>

这里面其实没有什么复杂的实现，只是做了个中间态的判断，就非常轻松的实现了radio的三种状态切换。
秀到头皮发麻法
先看效果

（此天秀效果来自于 Ben Szabo 的 codepen，有兴趣的可以仔细研究下，我何时才能有大佬这么优秀，嘤嘤嘤~）
输入框绑定的可选值
先看效果

其实代码很简单：
<input type="text" list="names" multiple />
<datalist id="names">
    <option value="kris">
    <option value="陈大鱼头">
    <option value="深圳金城武">
</datalist>

<input type="email" list="emails" multiple />
<datalist id="emails">
    <option value="chenjinwen77@foxmail.com" label="kris">
    <option value="chenjinwen77@gmail.com" label="kris">
</datalist>

<input type="date" list="dates" />
<datalist id="dates">
    <option value="2019-09-03">
</datalist>

这里原理就是通过 <input list="dates" /> 来绑定需要下拉显示的数据列表 <datalist id="dates"> 。
那么当我们要实现输入联想的时候，也可以通过修改 <datalist id="dates"> 的子元素来实现，而不是再写一大堆的操作函数来实现。
总结
其实 <input /> 标签还有很多有趣的功能是可以挖掘的，不同的类型，结合不同的选择器与属性，是可以有更多让人为之惊叹的体验的。如果你有兴趣的话，不妨多开开脑洞，亲自动手实现一些有趣的功能，或者有什么有趣的想法也可以在下方给鱼头留言或者加鱼头微信 “krisChans95” 来畅谈。
如果你喜欢探讨技术，或者对本文有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。

鱼头的微信号是：krisChans95

也可以扫码添加好友，备注“csdn”就行

我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能

但一般的做法只是简单的在表单中操作，我来研究一下深层东西

想要了解它，就要知道它的内置对象，files

页面上写一个input，然后选俩个图片，打印这个input对象

$("input[name='file1']").change( function(e){
    console.log($("input[name='file1']"))
})

发现有下列值，在0中，有一个files对象





我们发现input选择的文件被记录到了这个对象中，这个是fileList对象，是一个只读对象，不能修改

因为它不能修改，所以很难实现对已选中多个文件的删除某个文件等操作

里面记录了文件的name，size，type，和修改时间等，可知这个对象只存放了一些文件的信息，相当于是本地文件的索引，并不是把文件放到input中了，上传文件时它会再去找到实际的本地文件

fileList数组包含多个File对象，File对象是继承与Blob对象的，关于file，url,blob，dataUrl可以详细查查

一般url可以是本地地址，http地址等

blob对象一般的形式是：blob:http://192.168.100.151:8080/1148dcd6-952e-4478-823d-21b37e537c2f，属于浏览器对象

dataUrl 一直格式是：以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。

这三种形式在img标签中src属性都可以调用。

File对象有name，size,lastModified属性

File对象的创建：

var file1=new File([blob], "aa.png",{type:"image/jpg"}); //第一个参数是Blob对象或者dataUrl，第二个参数是文件名，三个参数可选，规定文件类型

注意：第一个参数必须是对象，不能是转换成的字符串，比如uniapp或者微信小程序的chooseImage方法返回的blob的url，他是一个字符串，这样生成的File对象只是将url字符串变成文件了，不是文件本身！！！

想把blob字符串变成Blob对象，可以用es6的：const blob = await fetch(image.path).then(r => r.blob())

或者用传统的XHR或者ajax也行，就是把blob对象根据url给获取出来就行。

利用这个files对象，我们可以实现很多功能，例如：

一.选择图片未经后端显示预览图片

方法1：利用window的url工具将文件生成url，再将url赋值给img的src属性，显示出选中图像

顺便提一下，input中控制选中类型加一个accept属性就行了，只会显示设定的文件类型

 

<input id="file1" type="file"  name="file1" multiple="multiple" accept=".doc，.jpg">

$('.fbpj-camera').change(function(event) {
	 	//$('.dianpuzhuangxiu .addmokuai .block .shuoming1 .pic .pic1').children().remove();
   		 // 根据这个 <input> 获取文件的 HTML5 js 对象
	    var files = event.target.files, file;        
	    if (files && files.length > 0) {
	      // 获取目前上传的文件
	      file = files[0];
	      // 来在控制台看看到底这个对象是什么
	      console.log(file);
	      // 那么我们可以做一下诸如文件大小校验的动作
	      if(file.size > 1024 * 1024 * 2) {
	        alert('图片大小不能超过 2MB!');
	        return false;
	      }
	      // !!!!!!
	      // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
	      // 获取 window 的 URL 工具     
	      var URL = window.URL || window.webkitURL;     
	      // 通过 file 生成目标 url
	      var imgURL = URL.createObjectURL(file);
	      // 用这个 URL 产生一个 <img> 将其显示出来
	      $('.fbpj .container').prev().find("img").attr('src', imgURL);
	      // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
	      	 //URL.revokeObjectURL(imgURL);
   		 }
  		});

方法二：利用html5的FileReader()读取文件

*前提是浏览器支持的话

if(window.FileReader) {  
    var fr = new FileReader();  
    // add your code here  
}  
else {  
    alert("Not supported by your browser!");  
} 

<script type="text/javascript">  
        function showPreview(source) {  
            var file = source.files[0];  
            if(window.FileReader) {  
                var fr = new FileReader();  
                fr.onloadend = function(e) {  
                    document.getElementById("portrait").src = e.target.result;  
                };  
                fr.readAsDataURL(file);  //也是利用将图片作为url读出
            }  
        }  
    </script>  
  
<input type="file" name="file" onchange="showPreview(this)" />  
                                <img id="portrait" src="" width="70" height="75">  

FileReader还有一些其他用法

<html>  
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <meta name="author" content="oscar999">  
  <title></title>  
  <script>  
  function  handleFiles(files)  
  {  
    if(files.length)  
    {  
       var file = files[0];  
       var reader = new FileReader();  
       reader.onload = function()  
       {  
           document.getElementById("filecontent").innerHTML = this.result;  
       };  
       reader.readAsText(file);   //作为字符串读出
        //reader.readAsText(file,'gb2312');   //默认是用utf-8格式输出的，想指定输出格式就再添加一个参数，像txt的ANSI格式只能用国标才能显示出来
    }  
  }  
  </script>  
    
  </head>  
  <body>  
  
  <input type="file" id="file" onchange="handleFiles(this.files)"/>  
  <div id="filecontent"></div>  
  </body>  
</html>  

readAsText一般只能读取txt,html等等文件，局限性较大，比如想要前端读excel文件，由于解决文件编码问题较为复杂，需要用到js-xlsx插件，具体可百度方法。

常用API：

FileReader.readAsDataURL(File) //转换成base64格式

FileReader.readAsText() //转换成字符串格式

FileReader.readAsArrayBuffer(File) //转换成ArrayBuffer格式

FileReader.readAsBinaryString(File) //转换成原始二进制格式（貌似已被废除）

FileReader.onload = function (e) { console.log(e.target.result) } //在上述读取事件完成时触发

 

二.文件拖拽的方法保存文件

 

关于文件拖拽下面有注释，我主要说一下怎么给用js给input赋值，而不是手动去选文件

因为拖拽的区域只是一个div，无法进行上传操作，所以需要加一个form和input，让拖拽进去的文件进入input中。

取出files后，用$("#file1")[0].files=files;将文件赋值给input，注意赋值的必须是fileList对象，不要试图只放进去一个文件，fileList只读。

然后用h5中的FormData将form转化，提交即可

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .container{
            width:300px;height: 300px;
            border:2px dashed #ddd;
            text-align: center;
            padding:50px;
        }
    </style>
    <title>
        培训活动列表
    </title>
</head>
<body>
<div class="container">
    拖拽进入
</div>
<form id="form1" method="post" enctype="multipart/form-data">
    <input type="file" name="file1" id="file1" value="" />
</form>
<script type="text/javascript">
    $('.container').bind('dragenter dragover', ignoreDrag);
    $(".container").on({drop:function(e){
        var flag=true;
        e.preventDefault();
        //jquery的file要去e.originalEvent里面拿，拖拽获取files的方式与input的不同
        var files = e.originalEvent.dataTransfer.files;
        //var files = e.dataTransfer.files;  原生的话这样就可以获取
        for(var i=0;i<files.length;i++){
            myFileReader(files[i],function(result,file){
                if(result){
                    //文件
                    console.log(file.name)

                }else{
                    //文件夹
                    console.log("不要上传文件夹")
                    flag=false;
                }
            });
        }
        if(flag){
            $("#file1")[0].files=files;   //关键：将取到的文件赋值给input，用于ajax提交文件！！！
            var formData = new FormData($("#form1")[0]);     
            $.ajax({
                url : "/it/orderManage/saveActivity",
                type : 'POST',
                data : formData,
                // 告诉jQuery不要去处理发送的数据
                processData : false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType : false,
                async : true,
                success : function(ret) {
                    //alert("上传成功")
                    if(ret){
                        $("#trainInfoModal").modal("hide");
                        layer.alert("保存成功")
                        $('#orderTable').bootstrapTable("refresh");
                        $("#trainInfoModal input").val("");
                        $("#trainInfoModal textarea").val("");

                    }
                }
            });
        }
        console.log(files);
    }})

    function ignoreDrag(e) {e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
    }

    function myFileReader(file, callback){
        if(!window.FileReader){
            callback(true,file);
            return false;
        }
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload=function(e){
            callback(true,file);
        }
        fr.onerror=function(e){  //不好判断是否是文件夹，通过上传报错可以判断是文件夹
            callback(false,file);
        }
        return true;
    };
</script>
</body>
</html>

后台获取文件还是用MutipartFile[]接收

public String saveActivity(@RequestParam HashMap<String, String> param,
                               //@RequestParam(value = "banner") MultipartFile[] files,
                               @RequestParam(value = "file1") MultipartFile[] file1,
                               HttpServletRequest request,
                               String fileNames,
                               String TID, HttpServletRequest req) {



三.vue+axios 上传文件

无论ajax还是axios，都不是直接用表单提交的，都是 要用 new FormData()转化一下。

所以axios方法与ajax方法类似

<input type="file" class="inputBtn"  @change="uploadMarketingForm">

uploadMarketingForm(e){
	console.log(e)
	var fileName=e.target.files[0].name; //文件名
	var fileSize=e.target.files[0].size; //文件大小
	var param = new FormData();
        //添加表单参数，如果后台用文件数组接收
        //param.append("file", e.target.files);
        //如果后台只接收单一文件
	param.append("file", e.target.files[0]);
        //设置表头类型
	const config = {
		headers: { "Content-Type": "multipart/form-data" }
	};
	this.axios.post("/.../uploadTest", param, config).then(res => {
		console.log(res);
	});
},


在java spring mvc中还是这么接收

@ResponseBody
@RequestMapping(value = "uploadTest", produces = "text/plain;charset=UTF-8")
public String uploadTest(@RequestParam Map<String,String> param,@RequestParam(value = "file") MultipartFile[] file1,
                         HttpServletRequest request) throws IOException {
    RetBase retBase = new RetBase();
    //文件可以在参数中用MultipartFile[]（多文件） 或者 MultipartFile （单一文件）接收
    //也可以像这样在request中接收
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    MultipartFile multifile = multipartRequest.getFile("file"); // 通过参数名获取指定文件
    String fileName = multifile.getOriginalFilename();
    // 获取文件后缀
    String prefix=fileName.substring(fileName.lastIndexOf("."));
    // 用uuid作为文件名，防止生成的临时文件重复
    final File file = File.createTempFile(UUID.randomUUID().toString(), prefix);
    // MultipartFile to File
    return JSON.toJSONString(retBase, SerializerFeature.WriteMapNullValue);
}





 

 

 

 

博客地址：http://www.globm.top/blog/1/detail/43

最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。
但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了
document.getElementById("input").focus();


或者利用vue的ref属性也可以实现聚焦效果：
原理其实很简单，Element 已经提供了 focus 方法，但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性，然后在需要的地方直接调用方法就可以了
<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

注意：一个页面只能有一个聚焦效果

last , vue也支持自定义指令

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有变化，如show或者父元素变化可以加延时或判断
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

参考：vue自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html