vue中如何禁止input框和textarea编辑

目录
  • 如何禁止input框和textarea编辑
    • 第一种方法
    • 第二种方法
  • 说说input无法输入原因

如何禁止input框和textarea编辑

在我们开发项目的时候，有时候我们不希望用户对我们的页面进行操作，尤其是输入框之类的，这时候我们需要设置一下

第一种方法

<input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%" readonly>
<textarea v-model="ConList.configuration.description" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" readonly></textarea>

重点：

我们使用readonly，用到此方法的好处是：当输入框被禁止以后没有灰色的背景色

第二种方法

<input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%" disabled>
<textarea v-model="ConList.configuration.description" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" disabled></textarea>

重点：

我们使用disabled,用到此方法的好处是：当输入框被禁止以后有灰色的背景色

根据项目的需求，不同的需求所用的方法不同，

拓展：

  • 禁止文本域拖动：resize:none
  • 禁止有滚动条：overflow:hidden

说说input无法输入原因

没有设定初始值 v-model

动态循环绑定值时需要使用

@input=“change()” change(){this.$forceUpdate()}

强制更新视图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现input框禁止输入标签

    目录 vue input框禁止输入标签 vue input框的禁用和可输入 vue input框禁止输入标签 <input type="search" placeholder="请输入内容" v-model="addTypeVal" :maxlength="5"> <script> export default{ watch:{ addTypeVal(val){ let reg = /[^\u0020-

  • vue表单验证之禁止input输入框输入空格

    vue表单验证之禁止input输入框输入空格

    测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法. input上添加下方代码(我用的vant也一样,包括elemenui等) @keydown.native="keydown($event)" methods中写入下方代码 methods:{ // 禁止输入空格 keydo

  • vue实现页面内容禁止选中功能,仅输入框和文本域可选

    上网上翻了翻,共找到两种方式 CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-se

  • vue 设置 input 为不可以编辑的实现方法

    我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点"编辑"时,显示可以编辑的那个input <div class="edit-item"> <input type="text" id="group-name" v-model="groupName" class="edit-input" disabled v-s

  • vue中如何禁止input框和textarea编辑

    目录 如何禁止input框和textarea编辑 第一种方法 第二种方法 说说input无法输入原因 如何禁止input框和textarea编辑 在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这时候我们需要设置一下 第一种方法 <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%"

  • vue中监听input框获取焦点及失去焦点的问题

    vue中监听input框获取焦点及失去焦点的问题

    目录 一.背景 二.首先是正宗的监听事件的写法 1.html代码 2.JS部分 三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法 一.背景 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla

  • vue登录页面设置验证码input框的方法

    vue登录页面设置验证码input框的方法

    本文实例为大家分享了vue登录页面设置验证码input框的具体代码,供大家参考,具体内容如下 1.效果 2.代码 第一步:建立子组件(举例,文件名可自己取)----代码如下 子组件 SIdentify 的完整代码: <template>   <div class="s-canvas">     <canvas id="s-canvas" :width="contentWidth" :height="cont

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • 在vue中实现禁止回退上一步,路由不存历史记录

    在有些情况下,我们不想往路由里添加历史记录.(vue的项目,vue-router中不想存历史记录) 根据vue官网提供的,楼主总结了一下,主要有以下几种方案: 根据官网的解释 .声明式路由和编程式路由都是添加新的记录,同时vue还提供了replace来替换路由记录,从而实现路由不存历史记录的情况,以下是楼主总结的几种方法: 1.声明式路由 2.编程式 3.原生js实现 楼主晚上回去看了一下<js高程>,原生实现替换路由,不记录历史记录的方法 window.open("http://w

  • 在vue中实现禁止屏幕滚动,禁止屏幕滑动

    今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果: 其中背景是透明色的,但是弹出这个组件时手指滑动.鼠标滚轮滑动,底部页面是会动. 作为自己开发的一个常用的组件,这种bug当然是要解决的. 于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法.终于找到了一个最简单.最实在的方法, 代码如下: <div class="magnify" v-show="isShow" @click.self="hide" @

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • vue中如何去掉input前后的空格

    目录 vue去掉input前后的空格 写一个去除input框空格的vue指令 使用方法 源码 总结 vue去掉input前后的空格 场景:在开发过程中,遇到表单填写,用户可以自由输入 截图举例: 这里,用户瞎输,填了几个空格,导致给后台发请求的时候,也带了好多空格,这种体验特别不好.因此在开发过程中,要考虑去空格的问题. 在vue 2.x中,v-model.trim就可以搞定,截图如下: 但是在vue1.x 中,v-model.trim 不生效,此时就不能这么改了.但是清楚底层原理,去掉字符串前

  • vue中div禁止点击事件的实现

    vue中div禁止点击事件的实现

    目录 div禁止点击事件 div作为按钮不可点击问题的处理 div禁止点击事件 在props里面定义一个判断是不是只读的属性. 在最外面的div里面添加三元表达式 pointer-events: none;是禁止鼠标点击事件 div作为按钮不可点击问题的处理 vue中div作为按钮,使用:disabled="flag"(flag为布尔类型)控制按钮是否可点击,发现无论flag为true还是false,div按钮都可点击. 解决方法,将div换成button. 以上为个人经验,希望能给大

随机推荐