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-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g; if(val.match(reg)) { this.addTypeVal = val.replace(reg, ''); } } }, } </script>
vue input框的禁用和可输入
input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了
<input type="text"//绑定的值 v-model="Copy.possWord1" :readonly="read ? false : 'readonly'" />
当read=0时文本框不可用,当read=1时文本框可用
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue动态控制input的disabled属性的方法
有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页
-
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:el-input输入时限制输入的类型操作
通过@keyup.native的时间动态监控输入的类型 1.手机号码,只能是数字,如果输入了非数字直接清空 2.身份证号码,除了Xx和数字其余的一律清空 3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面 setDelMsicStr(field,type){ let props let len let value let newphoestr let ite
-
vue表单验证之禁止input输入框输入空格
测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法. input上添加下方代码(我用的vant也一样,包括elemenui等) @keydown.native="keydown($event)" methods中写入下方代码 methods:{ // 禁止输入空格 keydo
-
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.js input框之间赋值方法
如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va
-
vue中input框的禁用和可输入问题
目录 input框的禁用和可输入 关于输入框的一些操作 input框的禁用和可输入 input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了 <input type="text"//绑定的值 v-model="Copy.possWord1
-
vue项目input标签checkbox,change和click绑定事件的区别说明
目录 input标签checkbox,change和click绑定事件的区别 input标签中checkbox类型的相关操作总结 一.checked属性 二.操作 三.关于checkbox的其他操作 input标签checkbox,change和click绑定事件的区别 我们经常在vue开发项目的过程中,遇到需要对input框使用v-modal的这种情况,在有的时候,不光需要双向数据绑定,还需要在改变数据之后绑定其它的操作,那么问题来了,你是使用@change绑定事件还是使用@click绑定事件
-
vue 清空input标签 中file的值操作
template中: <input type="file" ref="pathClear" @change="onUpload" name="file" id="file"> methods中: onUpload(){ this.$refs. pathClear.value ='' }, 补充知识:将input file的选择的文件清空的两种解决方案 上传文件时,选择了文件后想清空文件路径,搜索
-
vue登录页面设置验证码input框的方法
本文实例为大家分享了vue登录页面设置验证码input框的具体代码,供大家参考,具体内容如下 1.效果 2.代码 第一步:建立子组件(举例,文件名可自己取)----代码如下 子组件 SIdentify 的完整代码: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="cont
-
vue中的input框点击后不聚焦问题
目录 input框点击后不聚焦问题 vue input聚焦的坑 点击按钮,使某个input框聚焦 加载页面时自动聚焦 [坑] input框点击后不聚焦问题 废话不多说直接上代码 哪个地方要写input框 就直接把这一部分代码放上 里面双向绑定的值和事件换上自己定义的 <div class="item" @click.stop.prevent="inputPaentClick('input1')"> <input
-
vue中监听input框获取焦点及失去焦点的问题
目录 一.背景 二.首先是正宗的监听事件的写法 1.html代码 2.JS部分 三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法 一.背景 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla
-
VUE项目去除input 框值所有空格的操作方法
去除空格的方法 str.trim(); //去掉首尾空格 str.replace(" ",""); //去除所有空格,包括首尾.中间 str.replaceAll(" ", ""); //去掉所有空格,包括首尾.中间 str.replaceAll(" +",""); //去掉所有空格,包括首尾.中间 str.replaceAll("\\s*", ""
-
vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案
目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是
随机推荐
- AngularJS 自定义指令详解及实例代码
- apache开启.htaccess及.htaccess的使用方法
- SQL Server中的XML数据进行insert、update、delete操作实现代码
- Linux中/var/spool/postfix/maildrop占空间很大的原因解析
- Java数组的扩容代码示例
- Pycharm技巧之代码跳转该如何回退
- 前端学习笔记style,currentStyle,getComputedStyle的用法与区别
- asp.net web.config加密解密方法
- JSP spring boot / cloud 使用filter防止XSS
- 用JavaScript实现对话框的教程
- 深入浅出的学习Mysql
- Javascript 获取滚动条位置等信息的函数
- nginx,apache的alias和认证功能
- JQuery Tips相关(1)----关于$.Ready()
- DIV+CSS+JS 变灰弹出层
- Android控件SeekBar仿淘宝滑动验证效果
- PHP输出多个元素的排列或组合的方法
- Python实现发送与接收邮件的方法详解
- Vue常用指令详解分析
- 后台使用freeMarker和前端使用vue的方法及遇到的问题