精华内容
下载资源
问答
  • /*点击删除 清空输入框的内容*/ $( '.btn' ).click( function () { $( '.text input' ).val( '' ); }); }); script > body > html > 注意:必须引入jquery-1.11.3.js才能看到效果。

    这里写图片描述


    测试代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <div class="text">
                出发地:<input type="text"/>
                目的地:<input type="text"/>
            </div>
            <input class="btn" type="button" value="X"/>
        </div>
        <script src="../js/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function(e){
                /*点击删除 清空输入框的内容*/
                $('.btn').click(function(){
                    $('.text input').val('');
                });
            });
        </script>
    </body>
    </html>
    

    注意:必须引入jquery-1.11.3.js才能看到效果。

    展开全文
  • 废话不多说了,直接给大家贴关键代码了,具体代码如下所示:输入框清空按钮/*** 校验当前输入框的值,如果不为空显示清空按钮* @param element*/functioncheckInput(element){var value = $(element).val();...

    废话不多说了,直接给大家贴关键代码了,具体代码如下所示:

    输入框清空按钮

    clear input

    展开全文
  • 微信小程序例子——点击发送信息清空输入框

    1、效果展示


    2、关键代码

    index.wxml文件


    index.js文件


    3、源代码获取方式

    百度云链接:http://pan.baidu.com/s/1c2BnpnU 密码:rw9g


    4、在使用点击发送信息清空输入框过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信进行咨询,感谢支持!微信号:FutureJet


    5、觉得不错请打赏,您的十分满意是笔者的无限动力。

          

    展开全文
  • 在网页开发的过程中输入框是我们经常需要打交道的东西,一些与输入框相关的小工具也经常需要我们重复性地编写,例如用于点击搜索的输入框时常需要一个一键清空按钮,且每个按钮都大同小异,这样的东西如果不分离...

    1.简介

    在网页开发的过程中输入框是我们经常需要打交道的东西,一些与输入框相关的小工具也经常需要我们重复性地编写,例如用于点击搜索的输入框时常需要一个一键清空的按钮,且每个按钮都大同小异,这样的东西如果不分离出来的话,那么当页面增多时代码的改动就会很多。

    2.代码实现

    注意:这里的代码依赖于字体文件,字体可以去iconfont网站上找,当不存在字体文件时,图标会变成一个方框,虽然丑了点,但是并不影响使用,点击清空的功能还在,因此我这里把写过的代码直接贴出来,不足之处请指正。

    var dc = {
    	inputClear: function(input,styles,callback,cstyles){
    		var $input = $(input);
    		$input.each(function(index,ele){
    			var $self = $(ele);
    			var $parent = $self.parent();
    			if(!$parent.data('inputclear')){
    				var height = $self.css('height');
    				//判断是否存在一个类名为input-container的父元素
    				if(!$parent.hasClass('input-container')){
    					//新增将容器的宽高和display属性设置为和input元素一样
    					$self.before($('<span class="input-container"></span>'));
    					var $ctner = $self.siblings('.input-container');
    					$ctner.append($self).css({
    						"position" : "relative",
    						"display" : $self.css('display'),
    						"width" : $self.css("width"),
    						"height" : $self.css("height")
    					});
    					try{$ctner.css(cstyles);}catch(e){}//由外部矫正input-contianer的样式,如设置宽高为百分比值
    				}
    				//链式编程,并设置样式绑定事件,不知道会不会写的太复杂,哈哈哈,建议根据显示效果去反推,熟练了就适应了。
    				//链式编程、存储变量等对代码执行效率有提高哦
    				$self.on("input.clear",function(){
    					var $self = $(this);
    					if($self.val()==''){
    						$self.siblings('.input-clear-btn').hide();
    					}else{
    						$self.siblings('.input-clear-btn').show();
    					}
    				}).parent('.input-container').data('inputclear',true).append($('<span class="input-clear-btn iconfont icon-close1"></span>').css({
    					'position' : 'absolute',
    					"right" : '0',
    					"top": '0',
    					"cursor" : 'pointer',
    					"width" : height,
    					"height" : height,
    					"line-height" : height,
    					"text-align" : "center",
    					"color" : "#999",
    					"display" : "none",
    					"font-size" : $self.css("font-size")
    				}).on("click",function(){
    					$(this).hide().siblings('input').val('').focus();
    				}));
    				$self.trigger('input');
    				var $btn = $self.siblings('.input-clear-btn');
    				if(styles){
    					try{$btn.css(styles)}catch(e){}
    				}
    				if(typeof callback === 'function'){
    					callback($btn);
    				}
    			}
    		});
    	},
    	//清除由inputClear添加的清空按钮,重置input输入框
    	resetInputClear: function(input){
    		var $input = $(input);
    		$input.each(function(index,ele){
    			var $self = $(ele);
    			var $parent = $self.parent();
    			if($parent.data('inputclear')){ 
    				//移除清空按钮和keyup事件
    				$self.off("input.clear");
    				$parent.data('inputclear',false).children('.input-clear-btn').remove();
    				//如果此时$parent中只有$self一个元素,则将$self移到外面
    				if($parent.children().length==1){
    					$parent.parent().append($self).end().remove();
    				}
    			}
    			//清空MutationObserver 
    			var ob = $self.data('observer');
    			if(ob&& typeof ob.disconnect === 'function') try{ob.disconnect()}catch(e){}
    			$self.removeData('observer');
    		});
    	},
    }
    

    3.总结

    本文写于20190826,仓促总结,有待完善。

    展开全文
  • 最近做了毕业设计,其中遇到了很多问题。其中之一就是关于reset标签,以前做项目的时候也并没有过多的...标签,有时候我们会发现reset按钮失效,点击按钮并不能清空输入框。   原因在此:  w3c网站有这样的描...
  • 本文给大家分享基于js实现输入框清空按钮联动效果,非常实用,代码简单易懂,感兴趣的朋友一起看看吧
  • [size=x-large]使用标签,有时候我们会发现reset按钮失效,点击按钮并不能清空输入框。 原因在此: w3c网站有这样的描述(http://www.w3school.com.cn/htmldom/dom_obj_reset.asp)"在 HTML 表单中 标签每...
  • 输入框添加清空按钮

    2021-07-21 15:02:09
    代码链接 简单描述: 在输入框有内容时显示清空按钮输入框无内容是隐藏清空按钮 效果图: (PC) 效果图: (手机)
  • js输入框清空按钮联动

    千次阅读 2016-09-09 09:10:51
    <!DOCTYPE html> 输入框清空按钮 <script src="js/jquery1.8.3.min.js"> /** * 校验当前输入框的值,如果不为空显示清空按钮 * @param ele
  • <body> <input id="input" type="text" name="" id=""> <button onclick="addContent()">添加</button> <ul id="ul"></ul> <script> function addContent() {... let l
  • javascript清空输入框的值问题的解决

    万次阅读 2019-07-10 18:56:19
    这个问题要记录下,请教了...点击 button 时需要判断用户输入的账号密码是否为 123 ,并给予相应的提示(方式不限) 如果账号或密码错误,将密码所在的 input 节点中的内容清空 代码: <!DOCTYPE html> <...
  • 微信小程序,是属于小程序的一种,英文名为Wechat Mini Program,是一种不需要下载安装即可使用的...首先,当用户从输入框输入信息后,就会点击发送按钮进行发送信息,然后表单对输入框内发送的消息进行重置恢复初始默
  • antd中form中resetFields清空输入框

    千次阅读 2020-07-07 15:26:25
    1.如果没有initValue的情况下,直接使用resetFields可以清空文本框的值 2.如果是有initValue的...标签,有时候我们会发现reset按钮失效,点击按钮并不能清空输入框。 原因在此: w3c网站有这样的描述(http://...
  • 想实现一个登录界面常用的效果:点击按钮后切换input框的显示/隐藏密码首先想到的是,在按钮点击事件里调用focus()使input获得焦点,代码如下:显示/隐藏var isExposed=false;var btn=document.getElementById('...
  • jquery清空input中内容的方法:首先创建文件使用input标签创建文本框,同时使用button标签创建按钮;然后创建函数,在函数内获得input对象;最后使用【val()】清空input文本框的内容。本教程操作环境:windows7系统...
  • 1.如果没有initValue的情况下,直接使用resetFields可以清空文本框的值 2.如果是有initValue的情况下,直接使用resetFields方法会直接重置...标签,有时候我们会发现reset按钮失效,点击按钮并不能清空输入框。 ...
  • JavaScript实现留言板功能,要求:点击提交按钮,讲输入框中文字添加到显示留言下,并清空文本框;点击删除,将添加的姓名与内容以及删除按钮都删除。 CSS样式 <style> *{ margin: 0; padding: 0; } ...
  • 学过JS的同学都知道可以DOM对象获取html子标签并实现清空输入框功能,那微信小程序怎么做的呢? 首先为input指定value属性 <view class="itemView"> <label class="title">学号</label> <...
  • ExtJs 实现快速清空输入框的值

    千次阅读 2016-11-23 18:53:20
    如图↑:要求点击“取消”或“确定”的时候清空该表单中的所有输入框的值,即设所有 input 标签的 value 为 null。   实现:  var inputEl = Ext.select(".databaseMenu input").elements;  for ...
  • 点击清空按钮时,该输入框的值被清空清空按钮隐藏。 思路: 若能获取鼠标在页面中点击的元素是什么,就可以触发相应的事件,主要是event.target方法 代码:  <p class="urog-form-role...
  • jquery自动获取光标在字符串后 var str=$("#callnumber"...jquery点击按钮自动清空输入框文本再聚焦 $(".close").click(function () { $("#callnumber").val(""
  • class CustomTextInput extends React.Component { constructor(props) { super(props); // create a ref to store the textInput DOM element this.textInput = React.createRef();...清空<Button> ); } }
  • 输入框点击内容清空或显示的js代码

    千次阅读 2014-10-04 19:02:04
    1、输入框点击清空 onclick="this.value=''" /> 2、输入框点击显示提示内容 操作:鼠标点击输入框出现提示内容,再次点击清空内容可以进行输入。 onblur="note_click(this);" onclick="note_click(thi
  • Page({ /** * 页面的初始数据 */ data: { //输入框列表 inputList: [{ value:1,//步进器数值 purchaseValue:null,//进价输入值 }], }, //增加按钮 addmore(e) { console.log("增加") console.log(e) //简写变量书写...
  •    验证码 ... 描述:把验证码定义为按钮点击刷新  -->  ()" />  <!--  时间:2017-01-11  描述:验证按钮  -->  验证" onclick="validate()" />    

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,085
精华内容 4,434
关键字:

js点击按钮清空输入框