uni-app清空input输入框内容

最新推荐文章于 2023-02-20 14:44:19 发布
最新推荐文章于 2023-02-20 14:44:19 发布
阅读量1.4w 收藏 4
点赞数 2
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43572937/article/details/103681682
版权

uni-app的input框是不能清空的，所以需要自己自定义清空

可以自定义一个组件，当输入框有值的时候显示清空按钮，没有值的时候不显示。
我在uni-app插件市场上传了input框清空的通用组件。
https://ext.dcloud.net.cn/plugin?id=1148
gitHub：https://github.com/luckyCbaby/s-input.git

主要功能：
  1. 可以自定义输入框的样式
  2. 自定义label名称
  3. 自定义placeholder样式及class
  4. 可以清除input输入框的值
  5. 可以根据唯一id获取对应输入框的值
  6. 可以自定义初始值

这个组件还是很灵活的！！！
通过inputValue事件可以随时获取（监听）输入框的值

小馋猫s
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制
高级前端工程师
03-07 2458
uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办
带删除按钮的输入框
06-09
模仿iphone输入框添加删除按钮,自定义editext
uni-app中让input标签在点击时清空
qq_45401346的博客
04-23 9464
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1，动态的绑定value并为其将值设置为inputValue属性，因为默认的值是搜索商品名称或品牌 2,@fous属性是uni-app中方法，当input标签获得光标时，就会触发valueEmpty方法 methods:{ valueEmpty(e){ ...
uniapp中自定义带清除功能的input组件
qq_34553561的博客
05-31 5656
<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多个输入框带清除按钮
weixin_39703839的博客
12-10 8175
<template> <view> <view class="uni-form-item uni-column"> <view class="title">多个输入框都带清除按钮</view> <view v-for="(item,index) in formList" :key="item.value" clas...
使用uni-app开发的程序在PDA扫描后无法清空输入框的解决办法
YE_secoco的博客
10-25 2184
2020-10-24，这是一个周末。我本应该是躺在床上玩阴阳师的咸鱼。但是一想到我周一好像还得交付4个APP页面，我不得不从床上爬起来。 写着写着我头就开始疼起来了。因为我用uni-app开发的功能页面，在PDA扫描完之后，实际v-model绑定的值打印了一下确实是清空的，但是页面上仍然是显示着的，于是出于一条咸鱼的本能，我当然要寻求各位百度道友的帮助，果不其然还是有很多道友已经渡过此劫。于是我开心的荡起了代码。但是嘞，搬了半天代码还是不起作用，于是我心态崩了呀，看了一眼时间，已经23...
uni-app 富文本编辑 回显富文本和修改富文本！
最新发布
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板官网地址 平台兼容说明模板说明：基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器...
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
uniapp使用from表单提交后清空input输入内容的正确方法
君笑尘的技术博客
03-29 8595
做小程序开发的时候，经常使用到from表单提交，但是提交后input输入的内容却没有办法清楚。 搜索了一下后发现大家在微信小程序原生开发的方案都是给input的value设置一个默认值inputName，然后在提交成功后，把inputName通过this.setData 设置为空 //直接将input值设置空 this.setData({ inputName: '' }) 但是在uniapp上这样做，并不会改变input输入的内容，尝试改用了: this.inputNam
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 给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
uniapp uni-easyinput输入框清空按钮失效
weixin_45631278的博客
02-20 967
你小子这clear事件也没抛出去啊，o(╥﹏╥)o。uniapp你小子是懂怎么给我气死的。还特意去下载了一下最新的版本。我就说怎么一直清空不掉。
input只允许输入正整数，第一位是0自动删除
weixin_38152494的博客
12-12 2384
$(document).on('input','input',function(){ let val = $(this).val(); //只能输入数字 val = val.replace(/\D/g, ""); //输入大于0的数字时候自动清空前面的0 if (val > 0) { ...
uni-app input中的值无法被清除
qq_41200881的博客
04-23 2899
问题描述： uni-app的表单提交后清除input内容失败。 原因： 数据绑定用的:value,改成v-model后问题解决
uniapp 清除原生导航栏的值
qq_40630924的博客
10-31 646
uniapp 清除原生导航栏的值 项目需求,点击搜索过后希望输入框里的值为空,而不是一直显示在输入框里面 注意只能在手机上测试才会有效果 // #ifdef APP-PLUS //清除原生导航栏的值 // var pages = getCurrentPages(); const currentWebview = this.$scope.$getAppWebview(); currentWebview.setTitleNViewSearchInputText(''); // #endif ..
Uniapp添加删除示例
m0_72189003的博客
12-01 610
【代码】Uniapp添加删除示例。
uni-app input输入框超出换行
05-02
如果你想让 `input` 输入框在超出一定长度后自动换行，可以使用 `textarea` 组件代替 `input` 组件。`textarea` 组件默认支持换行，只需要设置宽度和高度即可。如果你非要使用 `input` 组件，也可以尝试使用 CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值