uniapp使用from表单提交后清空input输入内容的正确方法

最新推荐文章于 2025-05-26 21:57:28 发布

君笑尘

最新推荐文章于 2025-05-26 21:57:28 发布

阅读量9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uni-app 小程序开发文章标签： uni-app 小程序 javascript

本文链接：https://blog.youkuaiyun.com/junxiaochencom/article/details/115298033

在uni-app开发小程序时遇到form表单提交后无法清空input内容的问题。常规的设置input默认值并清空的方法在uni-app中无效。通过尝试，发现将input的value属性改为v-model双向绑定，在提交成功后可以成功清空input内容，解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用uni-app做小程序开发的时候，使用到from表单提交，但是提交后input输入的内容却没有办法清空。

	<form @submit="FormSubmit">
		<input confirm-type="go"></input>
		<button form-type="submit" class="">添加</button>
	</form>

搜索了一下后发现大家在微信小程序原生开发的方案都是给input的value设置一个默认值inputName，然后在提交成功后，把inputName通过this.setData 设置为空

 	//直接将input值设置空
     this.setData({
   
        inputName:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

君笑尘

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp input 双向绑定清空

carbonzhao的专栏

10-27

1万+

<input class="value-lable big-width" data-id="code" key="code" type="text" :value="stepData.code" placeholder="请输入" @blur="textFieldInputed" /> 代码如上，同学们注意观察，input动态绑定了:value来显示默认值，当你将，当你在textFieldInputed 方法内监听输入的文字是否有效时，就会出现问题。如果有效，则输入的文本允许显示出来，.

uni-app 提交完表单，自动重置表单

希默

06-06

1524

uni-app 并没有给表单组件提供类似resetForm的 API，只能通过这两种方法实现，如果有其他方法，欢迎其一探讨。

2 条评论您还未登录，请先登录后发表或查看评论

uni-app清空input输入框内容

最新发布

小淼淼的博客

05-26

694

基于 UniApp 的一键清除输入框内容方案，既能兼容 HarmonyOS 生态，也能满足多端统一开发需求。通过合理的组件封装、交互优化和样式定制，可以为用户带来高效、便捷的输入体验。希望本文能为你的鸿蒙/UniApp 项目提供实用参考。如有问题或更好的实现思路，欢迎留言交流！

uniapp-表单提交后请清空表单

陈小白

12-10

1万+

第一种通过v-model=""的动态清空 <form @submit="formSubmit" > <view> <input type="text" value="" v-model="test" name="test" /> <button form-type="submit">Submit<...

uniapp中自定义带清除功能的input组件

qq_34553561的博客

05-31

6462

<template> <view class="flex-center-center input-wrap"> <view class="input-lable">{{lable}}</view> <input class="input-val" :type="type" :focus="focus" :value="value" :password="password" :disabled="disabled" :data-field.

uni-app中让input标签在点击时清空

qq_45401346的博客

04-23

9883

<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1，动态的绑定value并为其将值设置为inputValue属性，因为默认的值是搜索商品名称或品牌 2,@fous属性是uni-app中方法，当input标签获得光标时，就会触发valueEmpty方法 methods:{ valueEmpty(e){ ...

uniapp使用vue3 + js开发app

02-10

### 使用 UniApp 和 Vue3 开发应用程序 #### 创建项目为了创建一个新的基于 Vue3 的 UniApp 项目，可以利用命令行工具 `vue-cli` 或者直接下载 HBuilderX IDE 来简化这个过程。HBuilderX 是 DCloud 推荐用于开发 ...

在uniapp Vue版本中在表单中写一个右边是按钮的输入框

03-08

title: `提交内容：${this.inputValue}`, icon: 'none' }) } } } .input-container { display: flex; align-items: center; padding: 20rpx; background-color: #fff; } .custom-input { flex: 1; ...

uni-app的uni-popup-dialog 清空输入值

01-08

为了有效管理并清空 `uni-popup-dialog` 的输入框中的值，在 Vue.js 和 UniApp 结合使用的场景下，可以采用响应式变量来绑定输入框的值。通过操作这个响应式的属性可以在任何时刻更新或清除其内容。对于 `...

uni-app踩坑 - 官方form组件表单提交后实现手动清空数据

PrisonersDilemma的博客

09-30

9400

官方属性说明如下图： form表单提交后，没有清空表单数据。现在要实现不通过按钮点击触发@reset=“formReset”，手动触发清空事件。 html： <form @submit="formSubmit" @reset="formReset"> <view> <button form-type="submit">Submit&l...

切换登录时，清空input输入框

weixin_53221528的博客

02-02

884

uniapp登录方式切换时，input的清空

uni-app多个输入框带清除按钮

weixin_39703839的博客

12-10

8361

<template> <view> <view class="uni-form-item uni-column"> <view class="title">多个输入框都带清除按钮</view> <view v-for="(item,index) in formList" :key="item.value" clas...

uniapp 微信小程序 使用easyinput增强输入框clearable清除内容无效的问题解决方法

chenglaugh1989的博客

12-18

2104

找到自己的项目中的增强输入框组件vue文件uni-easyinput.vue，修改文中的onClear方法。对输入值进行异步修改，使用this.$nextTick实现，以防止因父子组件数值关联造成输入值修改后又恢复的情况。使用uniapp开发小程序，用到了增强输入框easyinput，在进行实机测试时，点击输入框中的清除按钮，有时候会发生输入框内容未清除的情况，现在提供解决方法。这个方法是我尝试了多次琢磨出来的，亲测可用。

uni-app 给input框添加点击清空按钮

小猫爪子

11-20

1万+

用value绑定输入的值，要通过@input事件监听，这个方法只要input值发生改变就会调用，v-if控制‘清空’这个图标，没值就不显示，我悟了！！！效果图 <view slot="default" class="search_box"> <text class="icon_search"></text> <input style="width: 280px;" :value="searchName" class="prompt" placeholder

使用uni-app开发的程序在PDA扫描后无法清空输入框的解决办法

YE_secoco的博客

10-25

2584

2020-10-24，这是一个周末。我本应该是躺在床上玩阴阳师的咸鱼。但是一想到我周一好像还得交付4个APP页面，我不得不从床上爬起来。写着写着我头就开始疼起来了。因为我用uni-app开发的功能页面，在PDA扫描完之后，实际v-model绑定的值打印了一下确实是清空的，但是页面上仍然是显示着的，于是出于一条咸鱼的本能，我当然要寻求各位百度道友的帮助，果不其然还是有很多道友已经渡过此劫。于是我开心的荡起了代码。但是嘞，搬了半天代码还是不起作用，于是我心态崩了呀，看了一眼时间，已经23...

清空input的值

AinUser的博客

03-20

9899

<input name="user" class="txtshort" id="user" value="输入手机号码或邮箱" /> $("#user").val(""); 清空ID为user的值；

uniapp写小程序实现清除缓存（存储/获取/移除/清空）

weixin_57031986的博客

01-19

4498

uniapp写小程序实现清除缓存（存储/获取/移除/清空）

Uniapp添加删除示例

m0_72189003的博客

12-01

805

【代码】Uniapp添加删除示例。