input 订阅
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
First name: Last name:
展开全文
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
First name: Last name:
信息
外文名
input
类    别
函数
含    义
输入数据源
组    成
两个文本输入框和一个提交按钮
input函数
返回 String,它包含以 Input 或 Binary 方式打开的文件中的字符。语法Input(number, [#]filenumber)Input 函数的语法具有以下几个部分:部分描述number必要。任何有效的数值表达式,指定要返回的字符个数。filenumber必要。任何有效的文件号。说明通常用 Print # 或 Put 将 Input 函数读出的数据写入文件。Input 函数只用于以 Input 或 Binary 方式打开的文件。与 Input # 语句不同,Input 函数返回它所读出的所有字符,包括逗号、回车符、空白列、换行符、引号和前导空格等。对于 Binary 访问类型打开的文件,如果试图用 Input 函数读出整个文件,则会在 EOF 返回 True 时产生错误。在用 Input 读出二进制文件时,要用 LOF 和 Loc 函数代替 EOF 函数,而在使用 EOF 函数时要配合以 Get 函数。注意 对于文本文件中包含的字节数据要使用 InputB 函数。对于 InputB 来说,number 指定的是要返回的字节个数,而不是要返回的字符个数。
收起全文
精华内容
下载资源
问答
  • vue监听input输入事件-oninput

    万次阅读 热门讨论 2017-05-25 19:14:06
    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址: .vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput。...

    .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">
    

    希望这篇文章对您有所帮助!

    个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!
    这里写图片描述

    展开全文
  • 我的 Input框 不可能这么可爱

    万次阅读 多人点赞 2019-09-03 13:27:35
    input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识...

    <input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whatwgMDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。

    本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过多的基础说明~

    by

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

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

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

    se

    第一类:控制系(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> ,玩过扫雷的人都知道,右击除了可以选择红旗,还可以选择问号,就是选中,但不确定;又跟 promisepending 状态类型,介于 resolvereject 之间。

    多了 :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”就行
    https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/wx-qrcode1.jpg

    展开全文
  • 关于input type=“file”的及其files对象的深层探究

    万次阅读 多人点赞 2018-05-11 16:57:03
    我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能 ...页面上写一个input,然后选俩个图片,打印这个input对象 $("input[name='file1']").change( function(e){ console.log...

    我们都知道,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);
    }

     

     

     

     

    展开全文
  • element input输入框自动获取焦点

    万次阅读 2019-10-25 14:25:40
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦...document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果: 原理其实很简单,Element 已经提供了 focus...

    博客地址: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

    展开全文
  • 使用jquery如何清空input 中的内容

    万次阅读 2017-05-28 19:58:29
    用JQ的attr属性就可以清空input的内容 <inputtype="text"value="TEST"/> <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"type="text/javascript"/> <script> $(function(){ ...
  • vue三种常用获取input值写法

    万次阅读 多人点赞 2019-03-20 15:02:38
    1. v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊...input class="login-input" type="text" v-model="username" placeholder="请输入账...
  • 去掉input框的边框以及当点击时显示的边框 解决方法:http://www.yayihouse.com/yayishuwu/chapter/1407
  • 如何在HTML中限制input 输入框只能输入纯数字

    万次阅读 多人点赞 2018-02-27 15:23:29
    限制 input 输入框只能输入纯数字 1、onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母 2、onchange = "value=value....
  • 安装logstash和logstash-input-jdbc

    万次阅读 2020-04-02 11:04:18
    一.安装logstash 下载: Logstash地址:https://github.com/elastic/logstash/tree/v7.0.0 解压: unzip xxx.zip ...二.安装logstash-input-jdbc ...bin/logstash-plugin install logstash-input-jdbc ...
  • 修改input输入框的样式

    万次阅读 多人点赞 2016-08-08 10:51:02
    我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢? 下面我们来写个简单的表单 <form action="" method="get"> <div class="input_...
  • 一、Linux 下使用 nohup Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 &amp; 在程序结尾来让程序自动运行。 比如我们要运行weblogic在后台: ./startWebLogic.sh &amp;...
  • input和raw_input的区别

    万次阅读 2019-05-07 22:47:30
    首先明确一点,input()与raw_input()的区别只存在Python2.X环境下,因为在Python3中将Python2中的input()删除了,同时将raw_input()改名为input()。 如果你主要使用Py3,那么你只需关注在使用input()时所输入的数据...
  • python中input()和raw_input的区别

    万次阅读 2017-12-17 10:47:59
    Python 版本 2.x 中,raw_input() 会从标准输入(sys.stdin)读取一个输入并返回一个字符串,且尾部的换行符从末尾移除二、区别注意:使用python2.x版本进行相应的练习raw_input()随便输都是字符串,而input()必须...
  • react 获取input 输入框的值

    万次阅读 2018-08-03 11:11:27
    react 获取input 输入框的值 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ ...
  • HTML-input文本框(添加提示文字,填写内容时消失)

    万次阅读 多人点赞 2018-01-26 15:00:36
    input文本框内添加提示文字,填写内容时消失: 用placeholder属性作为提示语 <input placeholder="提示语..."></input>
  • 今天给大家带来React自定义input的样式,以及保留input的功能 React实现: 实现原理: 给input加ref,然后在你自定义样式的标签上面加点击事件,触发input的点击事件。 或者用label,都可以的。 如果用label实现请看...
  • input 事件

    千次阅读 2018-12-24 11:42:33
    input 事件 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js 3.onchange 当input失去焦点并且它的value值发生变化时...
  • input内容变动简单粗暴

    万次阅读 2019-06-13 14:29:01
    转载:https://www.jianshu.com/p/f6c0d879cbaf $(function(){ //输入框的值改变时触发 $("#inputid").on("input",function(e){ //获取input输入的值 console.log(e.delegateTarget.value); }); }); ...
  • filter_input 获取一个输入变量,并对它进行过滤 filter_input_array 获取多个输入变量,并通过相同的或不同的过滤器对它们进行过滤 语法 filter_input ( int $type , string $variable_name [, int $filter = ...
  • js实现input的赋值

    万次阅读 多人点赞 2018-03-10 17:36:20
    input框赋值 如下所示,是一个文本框的html代码,实际开发中,要涉及到将数据库中的数据取出然后放入input框中。 &lt;input id="name1" name="teacherName" type="text" /&...
  • uniapp input

    千次阅读 2019-04-23 14:56:11
    uni-app 密码框 <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input> displayable 属性
  • 去除input边框

    万次阅读 2017-05-12 18:34:37
    去除input的边框 去除input获取焦点时的蓝色外边框** 去除input的边框仅仅用border属性 ,其实是不能满足我们的需求的 此外还需要加上outline属性才可以 实现我们想要的样式 ** 去除边框的代码 border-width:0; ...
  • input函数

    千次阅读 2018-11-03 11:50:57
    input 函数实现键盘的输入,可以使用 input 函数从键盘等待用户的输入,用户输入的任何,内容 python 都认为是一个字符串 所谓输入,就是用代码获取用户通过键盘输入的信息 比如你希望得到用户输入的信息 ...
  • input输入框禁止显示历史记录

    万次阅读 2018-10-24 15:15:39
    在输入input时会显示原来输入的内容,禁止这种情况只需在input中加入: autocomplete=“off” &amp;amp;lt;input type=&amp;quot;text&amp;quot; autocomplete=&amp;quot;off&amp;quot; /&...
  • input各种事件

    万次阅读 2019-05-05 17:14:04
    1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。 3.onchange 当input失去焦点并且它的value...
  • input元素的oninput事件和onchange事件

    万次阅读 2019-03-20 23:43:47
    input元素的oninput事件和onchange事件 1、input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 <input type="text" id="input" oninput="handleInput()">...
  • Python:raw_inputinput用法

    千次阅读 2019-05-21 17:39:21
    使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 纯数字输入,当输入为纯数字时 input返回的是数值类型,如int,float raw_inpout返回的是字符串类型,string类型 输入...
  • layui分页成功,但点击页数时,列表数据正确,但是页数还是显示到第一页 ... 参考文献 ...button和input的区别 button能导致整个页面重新刷新,而input不会 参考文献 https://blog.csdn.net/qq_40113688...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 766,931
精华内容 306,772
关键字:

input