微信小程序 清空input内容

最新推荐文章于 2023-12-02 09:15:18 发布
最新推荐文章于 2023-12-02 09:15:18 发布
阅读量8.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 清空input 删除input内容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boy178/article/details/79317998
本文介绍了如何在微信小程序中通过WXML和JS文件实现点击按钮清空input输入框内容的功能，提供了具体的代码示例。

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

wxml文件如下：

<input style='border:solid 1px;' type='number' value="{{input_code}}"/>
<button bindtap='click' type='primary' style='width:100px;margin-top:20px;'>清空</button>
js文件如下：
Page({
  data:{
    input_code:""
  }
})
click:function(){
  this.setData({
    input_code:""
  })
}
点击按钮即可：


                

        

    

    
  



    



                



	

		

			

				
					
微信小程序 清空或修改input值 的方法

				
			

			

				

					happycxz的博客
				

				

					07-17
					
					5万+
					
				

			

		

		

			
				
微信小程序中的input组件，用来采集用户输入文本，官方组件并未提供接口供清除页面上显示的用户输入的部分，比如想要做一个按键“清除输入”，就尴尬了，因为button组件的事件里没办法控制到input组件的属性。网上搜了一些方法，比较讨巧的方式即，利用page data绑定的方式，即可实现上述功能，当然同时想要在程序中刷新input为其它信息也是很容易的事情了，具体参考以下代码：xx.wxml部分，将

			
		

	



                

            
              



	

		

			

				
					
微信小程序 input 不能输入特殊字符的方法

					
最新发布

				
			

			

				

					joe0235的博客
				

				

					04-19
					
					1100
					
				

			

		

		

			
				
微信小程序开发中经常遇到有表单提交的需求，一些特殊的字段要过滤掉特殊字符。比如姓名、籍贯、地址等，都要实现不能输入特殊字符的功能，可以创建一个统一的方法来处理输入事件，并在这个方法中检查输入的字符。请注意，这个示例在输入非符合正则表达式时会清空输入框，这可能会影响到部分用户的体验感。

			
		

	



              


  
              

                


	

		

			

				
					
【小程序】清空input框内容

				
			

			

				

					Maximus_ckp的博客
				

				

					05-04
					
					1万+
					
				

			

		

		

			
				
WXML:
<form bindreset="foo">
  <input bindinput="bindKeyInput" placeholder="在此输入"/>
  <button form-type="reset">发送</button>
</form>
  js:
Page({
  data: {
    inputValue:''//绑定的输入框文本
  },
  bindKeyInpu

			
		

	





	

		

			

				
					
微信小程序清空input内容

				
			

			

				

					小乔美哒哒
				

				

					05-07
					
					3536
					
				

			

		

		

			
				
需求说明
在有的时候，比如我们想要在点击按钮后就清空input的内容，但是官方并没有提供input清空的直接方法，博主自己亲身实践找到了一种方法。
第一步 添加input值
在我们想要改变的input中添加一个value属性，样例如下：
<input 其它的属性 value="{{addtext}}"></input>
第二步 添加data
在对应的.js文件中的Page中...

			
		

	



		

			
		



	

		

			

				
					
微信小程序input如何清空？

				
			

			

				

					qq_31594665的博客
				

				

					11-02
					
					2589
					
				

			

		

		

			
				
不需要设置重置属性，只需要在input中设置属性value。<type="text" name='name' value="{{name}}"/> 然后表单提交，在成功返回函数success中设置。这样就每次提交后都会把输入框的内容清空了。：可以用一个最简单的方法。

			
		

	





	

		

			

				
					
微信小程序 清空input框内容

				
			

			

				

					王扬扬的博客
				

				

					09-19
					
					1万+
					
				

			

		

		

			
				
需求为：点击发送之后，发送内容，并将发送的内容清空



不做任何处理的话，小程序是不会帮你清空表单的；本次代码如下：

wxml


&lt;form bindreset="foo"&gt;
    &lt;input bindinput='getMsg' name="msg"&gt;请输入...&lt;/input&gt;
    &lt;button form-type="reset"&

			
		

	





	

		

			

				
					
微信小程序---提交表单后清空输入框

				
			

			

				

					03-29
				

			

		

		

			
				
最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种， 1、可以用表单的重置功能。 按钮设置：   formType="reset">提交 form设置：    bindreset="formReset"> 表单重置时会触发reset事件，在...

			
		

	





	

		

			

				
					
微信小程序 input输入框控件详解及实例（多种示例）

				
			

			

				

					08-31
				

			

		

		

			
				
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...

			
		

	





	

		

			

				
					
微信小程序开发问答《四十九》input空间输入文字如何清空 & 时间处理问题 ..

				
			

			

				

					03-29
				

			

		

		

			
				
1、微信小程序中 input空间输入文字如何清空作者：huangmeimao 场景：希望读取input控件的输入内容之后，清空输入框的内容。由于本人是js小白，整整花了一两个小时都没找到方法。原来微信小程序不支持document通过id...

			
		

	





	

		

			

				
					
关于微信小程序清空input内容

				
			

			

				

					weixin_47966295的博客
				

				

					04-30
					
					3658
					
				

			

		

		

			
				
最近在学习微信小程序云开发时做一个数据库的增操作，当中遇到了一个小问题，在这做一个记录，方便大家不要像我一样踩坑

			
		

	





	

		

			

				
					
微信小程序开发教程：input输入框点击后自动清空，方便用户重新输入，提升用户体验

				
			

			

				

					qq_25501981的博客
				

				

					12-02
					
					3287
					
				

			

		

		

			
				
标签中，以便绑定一个事件处理函数。字段的值是通过页面的数据绑定来管理的。在上面的代码中，我假设你的。接下来，在你的页面的JavaScript代码中，添加。的当前值，并根据是否有内容来决定是否清空它。在这个事件的处理函数中，你可以检查。如果没有内容，则保持不变.是否有内容，如果有，就将其清空。要实现这样的功能，可以通过处理。字段时，如果里面有内容，函数就会被触发，从而清空。最后，确保在你的页面的。首先，你需要添加一个。字段的值绑定到了名为。

			
		

	





	

		

			

				
					
小程序 reset

				
			

			

				

					weixin_30525825的博客
				

				

					12-19
					
					630
					
				

			

		

		

			
				
page{
">;
}
.wrap{
width:100%;
font-family: PingFang-SC-Medium;
}
image,
input{
display: block;
}

/* 清浮动 */
.clear{ zoom:1;}
.clear:after{ content:""; display:block; clear:both;}
...

			
		

	





	

		

			

				
					
实现可清空的input和重置按钮

				
			

			

				

					00年女程序员分享自己的学习笔记
				

				

					07-20
					
					8762
					
				

			

		

		

			
				
此时，我们查询完成数据后，把输入框内容清空，点击查询按钮可以查询到所有用户信息。现在我们可以在输入框添加一个可以把输入框数据都清空的按钮，点击按钮输入框内容清空同时查询出所有用户信息。查阅element文档input中有一个可清空输入框，是使用clearable属性得到的...

			
		

	





	

		

			

				
					
微信小程序 输入框点击清空按钮 清空值

				
			

			

				

					Y1058144的博客
				

				

					08-28
					
					9298
					
				

			

		

		

			
				
点击右侧的清空按钮，实现输入框的值清空。

第一步：输入框设置value="{{inputValue}}"。


  <view class="setInfo">
    <view class="txt">手机号</view>
    <input class="mid" maxlength="11" placeholder="请输入手机号" value="{{inputValue}}" bindinput="bindReplaceInput"/>
  ..

			
		

	





	

		

			

				
					
小程序提交表单之后，清除表单form

				
			

			

				

					架构师之路
				

				

					11-08
					
					1617
					
				

			

		

		

			
				
小程序提交表单操作

			
		

	





	

		

			

				
					
React 如何清空 Input 和时间输入框，单独使用不含 FormItem

				
			

			

				

					本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
				

				

					07-30
					
					4094
					
				

			

		

		

			
				
React 的搜索输入框是动态生成的，没有放在 Form 对象中，同时提供一个重置按钮，以便手动清空输入框的内容。网上的资料都是直接通过 Form 对象的 `resetFieldValue` 实现的，通过跟踪 `Input` 对象的属性，找到了清空的方法，整理如下。...

			
		

	





	

		

			

				
					
微信小程序---点击按钮添加、删除输入框(input)

				
			

			

				

					
				

				

					10-03
					
					2万+
					
				

			

		

		

			
				
这篇文章以前几篇文章为基础！

			
		

	





	

		

			

				
					
小程序刷新重置当前页面

					
热门推荐

				
			

			

				

					star950117的博客
				

				

					08-21
					
					7万+
					
				

			

		

		

			
				
在小程序开发过程中遇到提交表单，当表单提交完成后重置当前页面，因此需要用到刷新当前页面，关键代码如下：


if (getCurrentPages().length != 0) {
            //刷新当前页面的数据
            getCurrentPages()[getCurrentPages().length - 1].onLoad()
          }

首先判...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值