在做项目时,有时我们需要让 input 聚焦,为了让用户更好的使用。
所有的浏览器都有一个内置的方法,让 input 聚焦。首先,我们需要获取元素。
在原生 JS 中,我们可以使用下面方式来获取元素:
<form>
<input id="email" />
</form>
const input = document.getElementById('email');
vue 提供了一个更好的方法:
<template>
<input ref="email" />
</template>
const input = this.$refs.email;
获取元素后,我们就可以让 input 聚焦了
<template>
<input ref="email" />
</template>
export default {
methods: {
focusInput() {
this.$refs.email.focus();
}
}
}
如果使用的是自定义组件,则$ref获取是该组件,而不是我们基础元素。 因此,如果尝试让该组件聚焦,就会报错。要获得自定义组件的根元素,我们可以用 $el 访问:
<template>
<CustomInput ref="email" />
</template>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput,
},
methods: {
focusInput() {
this.$refs.email.$el.focus();
}
}
}
但是,如果要在组件加载时就聚焦,要怎么做呢?
我们可以 mouted 生命周期,让元素聚焦:
<template>
<CustomInput ref="email" />
</template>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput,
},
mounted() {
this.focusInput();
},
methods: {
focusInput() {
this.$refs.email.$el.focus();
}
}
}
在某些情况下,我们可能需要等待Vue完成整个应用程序的重新渲染。例如,如果将input从隐藏状态切换到显示状态。
因此我们需要等待 input 加载好后,才能重新聚焦。
<template>
<div>
<CustomInput v-if="inputIsVisible" ref="email" />
</div>
</template>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput,
},
data() {
return {
inputIsVisible: false,
};
},
mounted() {
this.focusInput();
},
methods: {
showInput() {
// Show the input component
this.inputIsVisible = true;
// Focus the component, but we have to wait
// so that it will be showing first.
this.nextTick(() => {
this.focusInput();
});
},
focusInput() {
this.$refs.email.$el.focus();
}
}
}
这里,我们在 nextTick 方法中调用 focusInput 方法。因为 nextTick 中表示 dom 已经加载完成了,所以这时我们才能获取到 input 元素。
对部分生僻的input属性值解释:type=reset可以一键清空form表单里面所有的数据、datalist的运用: 输入框输入的值会自动匹配datalist下拉框的值,input的list属性值必须和datalist的id值一致
在移动端的web开发中,一提起输入框,程序猿(媛)肯定有很多可以吐槽的点。在输入框的运用中,小编也是很心累呀~ ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
标签绑定了onkeyup键盘抬起事件以及onafterpaste粘贴文本进输入框两个事件,当有这两个操作时,就会触发相应的校验方法;当事件触发时,首先会有个变量imeStatus校验是否是IE浏览器,然后再根据正则校验进行输入框值的替换
需要把一个input输入框内的字母自动转变为大写。1.使用JavaScript,在input标签添加onkeyup方法,将字符转为大写。2.使用CSS,给input设置样式。
disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。readonly unselectable=”on” 该属性跟disable类似
怎么修改input、textarea元素中的placeholder属性样式?冒号前写对应的input或textarea元素等。 样式修改包括:颜色 大小 位置
最近在用vue写几个H5页面在微信上展示,遇到一个在弹窗上input输入完成之后点击键盘的完成,页面底部留出一片空白的问题,当键盘抬起时,window.scrollY会从0变到键盘的高度
HTML5 中有个新特性叫 placeholder,一般用它来描述输入字段的预期值,适用于 text、search、password 等类型的 input 以及 textarea。对用户来说,placeholder 就是文本框中的输入提示信息,往往是对预期值或预期格式的简短描述
Input 是Angular内部的属性装饰器,用来定义组件内的输入属性。在实际应用场合,通常用来实现父组件向子组件传递数据。有时候子组件单据的接收父组件传递过来的数据,不符合需求,需要另外处理数据
方式一:拿到value值以后 在你传递之前处理;方式二:从最根本上也就是提示用户输入不了特殊字符;方式三:onkeyup事件 拿到以后去匹配 跟方式一类似;
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!