【2023-5-31】设置input框禁止输入

input框禁止输入

问题背景

很久没有更新，今天遇到一个小需求，简单记录一下：
项目中封装了一个upload组件，通过按钮触发文件选择，选择完的文件需要将文件名称展示在input框中。
选择文件后，存在修改了input框值但上传文件名称未修改的情况，遂要求input禁止输入（非禁用）。

实现

input标签禁止输入的方法：

• 添加 οnfοcus=“this.blur()” 使元素失去焦点
• 将属性 maxlength 的值设为 0

由于input绑定值为选择文件的名称，不能限制最大长度，故选择使其失去焦点的方式，实现代码与下方类似

 <input v-model="fileName"  name="" id=""  οnfοcus="this.blur()">

浅解

绑定onfocus方法，触发聚焦事件是会调用input的blur()方法，导致其失焦。相当于聚焦的同时失焦，所以input框无法输入，从而达到禁止输入的目的（个人理解）。

tips

趁着五月的尾巴，记录一个简单的工作案例。也希望所有人都能保重身体，生病好痛苦，也好花钱o(╥﹏╥)o