input相关

在ios中输入英文首字母默认大写取消方法

<input autocapitalize="off" autocorrect="off" />

    //也可以在form元素上设置

<input type="password" >//始终不会开启自动首字母大写。

浏览器表单自动填充

<input type="text" autocomplete="off" name="userName"/>

<input type="password" autocomplete="new-password" name="password"/>

//普通文本框添加 autocomplete="off"，密码输入框添加 autocomplete="new-password"。

//同样也可以在form元素上设置

autocapitalize="words"时，每个单词的开头字母会自动大写。

autocapitalize="characters" 时，每个字母都会大写。

autocapitalize="sentences" 时，每句开头字母会自动大写。

placeholder，提示信息。

可通过input::placeholder设置样式

之前还遇到的,在vue中input显示隐藏聚焦的问题:

​ 1.通过directive自定义组件的方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <input type="text" v-focus v-if='bol'>

        <button @click='bol = !bol'>

            切换Input框显示和隐藏

        </button>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        Vue.directive('focus', {

            // 插入到dom的时候执行的钩子函数

            // 进行JS中的有关操作

            inserted(el) {

                el.focus()

            }

        })

        var vm = new Vue({

            el: '#app',

            data() {

                return {

                    bol: false

                }

            },

            methods: {}

        })

    </script>

</body>

</html>

​

2.通过ref直接操作dom元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <input type="text" ref='inputFocus' v-if='bol'>

        <button @click='show'>

            切换Input框显示和隐藏

        </button>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        var vm = new Vue({

            el: '#app',

            data() {

                return {

                    bol: false

                }

            },

            methods: {

                show() {

                    this.bol = !this.bol

                    // 在dom更新完毕之后立即执行的回调函数执行的操作 					页面显示的dom结构是最新的

                    this.$nextTick(function () {

                        this.$refs.inputFocus.focus()

                    })

                }

            }

        })

    </script>

</body>

</html>

完。

input相关的更多相关文章

  1. CSS:与input相关的一些样式设置问题

    input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐 关于上下 ...

  2. ionic angularJS input 相关指令 以及定时器 的使用

      <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte ...

  3. input相关问题总结

    1. 禁止为所有被激活的输入框添加边框 *:focus {outline: none} 2. 禁止为被激活的输入框添加边框,说明:".abc"为输入框对象自定义添加的class类命 ...

  4. PHP输入流 php://input 相关【转】

    为什么xml_rpc服务端读取数据都是通过file_get_contents(‘php://input', ‘r').而不是从$_POST中读取,正是因为xml_rpc数据规格是xml,它的Conte ...

  5. 16.和input相关的知识点

    1.改变input里面placeholder颜色 <input class="pre_name" type="text" placeholder=&quo ...

  6. js input相关事件（转载）

    1.onfocus  当input 获取到焦点时触发. 2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空.3.o ...

  7. input 相关

    1.label 标签 for 属性同 input 标签 id 属性联系之一

  8. input的type=file触发的相关事件

    与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...

  9. android adb shell input各种妙用

    项目中使用一个开发版,预留两个usb接口.类似华硕TinkerBoard. 一个用户连接摄像头,一个用于adb调试.结果就没了鼠标的接口.多次切换鼠标和摄像头插头,非常不方便,带摄像头的app没法调试 ...

随机推荐

  1. VS2019 C++动态链接库的创建使用(3) - 如何导出类

    如何在动态链接库里导出一个类? ①在库头文件里增加一个类声明,class DLL1_API Point是将类内所有成员都导出,如果只导出某个成员函数,则只需在对应的成员函数前加DLL1_API即可: ...

  2. FFmpeg SDK for iOS

    FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的跨平台开源计算机程序. 很多平台视频播放器都是使用FFmpeg来开发的,FFmpeg官方并没有为各个平台提供编译好的SDK,所以使 ...

  3. Python编写“求一元二次方程的解”

    #求一元二次方程的解 import math def equation(a,b,c): h=b*b-4*a*c #一元二次方程的解,百度来的 if h>=0: x1=(-b+math.sqrt( ...

  4. 第十四周java实验作业

    实验十四  Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1) 掌握GUI布局管理器用法: 在java中的GUI应用 程序界面设计中,布局控制通过为容器设置布局管理器 ...

  5. 毫米波大规模阵列中的AOA估计

    1.AOA估计在毫米波大规模MIMO中的重要性 在毫米波大规模MIMO的CSI估计中,AoA估计具有重要地位,主要原因归纳如下: 毫米波大规模MIMO 的信道具有空域稀疏性,可以简单通过AoA 和路径 ...

  6. P4147 玉蟾宫 题解

    原题链接 简要题意: 求最大 \(0\) 矩阵.(将字符转化为数字) 本题是模板题,可以用来爆踩.??? 悬线法 来了! 其中绿色是 \(0\),红色是 \(1\). 下面以这个图为例讲一下算法流程. ...

  7. 使命召唤:战区国际服ID注册与登录

    命召唤:战区 国际服ID注册与登录 1.下面官网网页注册国际服账号.2登录游戏.就这么简单.(前提是网咖.电竞宾馆.已经提供好游戏)  !!!注意 如果是网吧网咖电竞宾馆,用其给你提供的游戏图标进入游 ...

  8. 【科创人独家】PingCAP黄东旭：想告诉图灵这个世界现在的样子

    创业是投己所好 科创人:作为技术圈内著名艺术青年,哪个瞬间会让您更开心,完成一段优美的代码或者乐谱?还是得到来自外界的欢呼与掌声? 黄东旭:在创业之前的很长一段时间里,完成一段代码.写完一首好曲子那一 ...

  9. cookie sessionStorage localStorage 使用小结

    1.cookie 随http 一起发送 2.webStorage 客户端本地存储功能 可以在客户端 本地建立 一个数据库 不参与与服务器的通讯 setItem (key, value)   —— 保存 ...

  10. class字节码的结构

    class字节码的结构 使用javap -verbose 命令分析一个.class字节码文件时(以下简称字节码文件),将会分析该字节码文件的魔数,版本号,常量池,类信息,类的构造方法,类中的方法信息, ...