vue项目固定文字和输入框的组合表单输入

已于 2023-06-14 09:11:41 修改
阅读量2.3k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： #前端组件库 文章标签： vue.js 前端 javascript elementui html
于 2023-06-12 11:44:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liu__yuan/article/details/131132451
文章展示了如何在Vue前端项目中利用Element-UI和Vant组件实现一种半输入模式，即结合固定文字和输入框来减少用户输入，提高效率。当用户选择不同城市时，公司名称的输入格式会相应变化，例如在北京市和上海市情况下，会有不同的前缀和后缀。代码示例分别给出了PC端和移动端的实现方式。

        在做前端vue项目的时候，有时为了减少用户的输入时间，开发者会将某些格式固定的表单输入项进行优化，方法就是通过组合固定文字和输入框来尽可能地减少用户的输入字数，进而减少输入时间，先上效果图吧：

        上面就是根据单选框的值来切换公司名称的输入格式，这种固定文字和输入框的组合我姑且称之为半输入模式。下面是具体的前端代码（包括PC端和移动端）实现：

一、PC端（使用element-ui组件）

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3 - 实现禁止input输入框禁止输入空格，textarea、input表单禁止输入空格不允许用户提交空格，vue3 input输入框禁止用户输入空格（el-input、a-input组件库）
🏆 前端领域优质创作者
10-22 4172
vue3如何实现input输入框禁止输入空格，vue3怎么让textarea禁止输入空格，支持Element Plus、Ant Design Vue，el-input输入框禁止输入空格，vue3 input表单禁止输入空格_input输入框不允许输入空格，vue3 H5页面input框禁止输入空格限制，怎么彻底限制input输入框禁止用户输入空格，不允许空格出现在输入框内而不是提交时去掉，antd输入框组件不允许用户输入框，vue3从根本限制输入不会让空格打出来，微信公众号网页H5禁止用户输入空格，inpu
Vue：实现输入框/选择列表内容更改，页面实时预览多个内容变化
qq_46119575的博客
06-22 5602
在各种前端页面中，比如用户信息注册的页面，往往有多个输入框和多个选项列表。为了避免用户选错或者输入错误，可以在前端页面上实时将多个输入框的内容拼接起来，显示到页面或者弹出的窗口中，帮助用户核对、检查输入的内容是否有错，提高用户体验。本文介绍了在 Vue 中如何实现用户输入多个内容或者选择多个选项列表，与多个内容拼接起来显示到页面上，实现实时预览的效果。
Vue - 表单输入绑定详解
学无止境
12-30 1643
在Web开发中，表单是用户与应用程序交互的重要方式之一。Vue.js 提供了强大的表单输入绑定机制，使得在处理用户输入时变得更加简洁和高效。本篇博客将深入探讨 Vue.js 中表单输入绑定的各种用法，包括文本输入、多行文本、复选框、单选按钮、下拉选择框、多选框，以及修饰符的使用。
《Vant 移动端 Vue 组件库的使用》
yk_ddm的博客
12-28 1022
目录Vant 移动端 Vue 组件库的使用案例demo Vant 移动端 Vue 组件库的使用 轻量、可靠的移动端 Vue 组件库 案例demo van-form Form 表单的使用
Vue基础-输入文本框
weixin_72492001的博客
08-11 4595
Vue基础-输入文本框
vue el-input输入框设置固定前缀字符串
qq_634380940的博客
07-05 998
el-input输入框设置固定前缀字符串
Vue ElementUI实现:限制输入框只能输入正整数的问题
10-15
在Vue ElementUI框架中，有时我们需要对用户输入进行限制，例如仅允许输入正整数。以下将详细介绍如何实现这一功能。 ### 方法一：利用禁止按键的方法 这种方法通过监听`keyup`事件来阻止用户输入减号 `-` 和...
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端...
vue 表单输入框不支持focus及blur事件的解决方案
01-21
采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): ... 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () ...
vue+element UI 实战点击按钮添加一组输入框
qq_44811609的博客
12-29 5555
点击添加实验组 ，添加一组输入框,点击减号删除一组输入框 <el-button type="primary" style="margin-left:30px" @click="addItem">添加实验组</el-button> <div class="form" v-show="dialogForm" v-for="(item,index) in List" :key=...
vue文本输入框（textarea）
热门推荐
JEFF_xieyuzhi的博客
03-24 2万+
源码： <template> <div> <headers title="新建记录"></headers> <div class="text-area"> <textarea placeholder="请输入记录评语..."> </textarea> &lt...
Vue ElementPlus 组件 Input 输入框
小楼一夜听春雨，深巷明朝卖杏花
03-31 2443
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。不支持 v-model 修饰符。可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。使用show-password属性即可得到一个可切换显示隐藏的密码框。使用clearable属性即可得到一个可清空的输入框。input 为受控组件，它总会显示 Vue 绑定值。带有图标标记输入类型。
【Vue3 Element UI - Plus + Tyscript 实现Tags标签输入及回显】
qq_45973421的博客
03-06 1896
是一个常见的功能需求。用户可以通过输入框添加标签，并通过关闭按钮删除标签，同时还需要支持标签数据的提交和回显。本文将详细介绍如何使用。通过以上实现，我们完成了动态标签的添加、删除、提交和回显功能。用户可以通过输入框添加新标签，并通过关闭按钮删除标签。希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区留言讨论~在编辑表单时，需要从接口获取已保存的标签数据并回显到页面上。在开发后台管理系统或表单页面时，渲染标签列表，并使用。动态标签的核心是通过。字段随表单一起提交。
吐得了，vue的多选组合框回显必须是字符串集合
weixin_30315435的博客
08-09 225
下面这个typeIdList，如果给他赋值，就能回显到页面，但是必须是字符串的集合，如果是数值类型的id，不好意思，请转成字符串 转载于:https://www.cnblogs.com/LcxSummer/p/9450823.html...
VUE+table表格里面嵌套输入框：
zhu_tian_huan的博客
05-19 2093
table表格里面加输入框
vue3 实现一个简单的输入框
不想起床
02-29 3088
需要一个输入框，可以输入文字，添加表情，一开始用了**富文本编辑器**，有点大材小用，所以自己封装一个输入框组件。支持输入文字，选择表情/插入表情，支持组合键换行，使用enter
element-vue 如何在文本框后添加文字
George_huhu的博客
12-08 1万+
vue-element 文章目录vue-element前言一、怎么做？1.示例代码2.结果图片 前言 在我们设计前端页面时，总会使用input输入框，当你要输入某些固定单位时，如何在输入框后固定单位呢？。 一、怎么做？ 1.示例代码 代码如下（示例）： <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="公里数" prop="cMile"
iview 引入组件 并 input框 固定显示 文本
weixin_44747789的博客
06-30 768
首先移植是这个组件，但这个组件并不支持搜索功能。 因此希望自己重新写一个组件 支持首字母及搜索功能. 基础知识准备： 组件使用的三个步骤 1.创建组件构造器 调用vue.extend（）方法 2.注册组件 调用 vue.componet()方法 3.使用组件 注意要作用范围内 ...
实现 input框前有固定文字并且文字焦点向右对齐
weixin_48338881的博客
01-12 1986
实现 input框前有固定文字并且文字焦点向右对齐
vue3表单校验，输入框内容只能输入非中文
最新发布
06-05
### Vue3 表单校验限制输入框只能输入非中文字符的实现 在 Vue3 中实现表单校验，可以通过 `v-model` 绑定输入框值，并结合正则表达式对用户输入进行实时校验或过滤。以下是一个完整的示例，展示如何确保输入框内容...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【金融科技蚂蚁】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值