精华内容
下载资源
问答
  • 修改element UI中input清空按钮

    千次阅读 2020-03-13 20:19:09
    上图是element UI中自带的清空按钮 下图是我需要的清空按钮 /** *修改:在element UI文档上找到默认的清空按钮, 然后找到默认按钮的content属性, 直接替换content的值就可以* **/ .el-input__suffix { .el-input...

    在这里插入图片描述
    上图是element UI中自带的清空按钮
    下图是我需要的清空按钮
    在这里插入图片描述

    /**
    *修改:在element UI文档上找到默认的清空按钮,
    然后找到默认按钮的content属性,
    直接替换content的值就可以*
    **/
    .el-input__suffix {
        .el-input__suffix-inner {
          border-color: none;
          .el-icon-circle-close:before {
            content: "\e79d" !important;
            font-size: 18px;
          }
        }
      }
    
    展开全文
  • 我们要实现的功能是,在输入的时候,右侧的清空按钮显示出来,然后当删除input中的内容的时候,清空按钮也消失。 以前实现的时候,我用的是“keyup”事件。某一次在做触屏版的时候,不知怎么搞的就是触发不了事件,...

    input框旁边的清空input按钮,我们一般在制作注册以及登录页面的时候会用到。一般的样子是这个样子滴:

     =》

    我们要实现的功能是,在输入的时候,右侧的清空按钮显示出来,然后当删除input中的内容的时候,清空按钮也消失。

    以前实现的时候,我用的是“keyup”事件。某一次在做触屏版的时候,不知怎么搞的就是触发不了事件,于是像一位牛人请教,get到了这个新技能:

    首先看下这个布局的HTML:

    <div class="input-box">
         <input required="required" type="text" class="name-input" placeholder="请输入昵称" />
         <a href="javascript:;" class="clear-input">
           <img src="images/icon-clear.png" class="clear-input-img" alt="" />
        </a>
    </div>

    实现这个功能很简单,出去基本的样式之外,再加上这样的样式就OK啦:

    .name-input:valid + .clear-input {display: block;}

    来解读一下~~

    在Input后面放个清除的按钮;

    :valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式(这里要记得在input里面加上required="required",表示必须);

     +号的意思是input后面那个css样式名;

    “clear-input”要先隐藏,这个隐藏不要写在行内。

    这句话的意思就是:当name-input框内有文字的时候,clear-inout就要显示出来。

     

    是不是很简单~~

    转载于:https://www.cnblogs.com/benbendu/p/7055645.html

    展开全文
  • 问题:el-input输入框的clearable清空按钮挡住了文字 el-input有 :maxlength=“maxlength” clearable :show-word-limit 解决:在el-input写style=“padding-right:100px”;设置的比原来的padding-right大一点就可以...

    问题:el-input输入框的clearable清空按钮挡住了文字

    el-input有 :maxlength=“maxlength” clearable :show-word-limit

    解决:在el-input写style=“padding-right:100px”;设置的比原来的padding-right大一点就可以

    展开全文
  • uni-app 给input框添加点击清空按钮

    千次阅读 2020-11-20 15:19:05
    用value绑定输入的值,要通过@input事件监听,这个方法只要input值发生改变就会调用,v-if控制‘清空’这个图标,没值就不显示,我悟了!!! 效果图 <view slot="default" class="search_box"> <text ...

    用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="请输入员工姓名" @input="theBlur"></input>
    	<text v-if="searchName" class="icon_close" @click="close"></text>
    </view>
    <sript>
    //methods
    close:function(){
    	this.searchName = ''
    	this.queryByInput()
    },
    theBlur(e){
    	console.log(e.target.value)
    	this.searchName = e.target.value
    	this.queryByInput()//查询列表调用的方法
    }
    <sript>
    <style>
    	.search_box {
    		width: 400upx;
    		height: 64upx;
    		background-color: #f5f5f5;
    		border-radius: 32upx;
    		display: flex;
    		align-items: center;
    		padding: 0upx 40upx;
    		.prompt {
    			font-size: 28upx;
    			color: #cccccc;
    		}
    	}
    	
    	.icon_search {
    		background-image: url(../../static/nav/map_ic_search.png);
    		background-position: center center;
    		background-repeat: no-repeat;
    		background-size: cover;
    		width: 32upx;
    		height: 28upx;
    		margin-right: 20upx;
    	}
    	
    	.icon_close {
    		background-image: url(../../static/nav/del.png);
    		background-position: center center;
    		background-repeat: no-repeat;
    		background-size: cover;
    		width: 32upx;
    		height: 28upx;
    		margin-right: 10upx;
    	}
    </style>
    
    展开全文
  • 废话不多说了,直接给大家贴关键代码了,具体代码如下所示:输入框清空按钮/*** 校验当前输入框的值,如果不为空显示清空按钮* @param element*/functioncheckInput(element){var value = $(element).val();...
  • input type=“checkbox”/> 复选框 < div id=“loginbtn”>点击清空< /div> $("#loginbtn").click(function(){ $('div input[type=checkbox]').attr('checked',false);//清空复选框 })
  • // input输入框清空 $("input[type=text]").val(''); $(".licontent input[type=hidden]").val(''); // 下拉框清空 <select class="selectpicker show-tick " id = "status" multiple></select> .....
  • 当鼠标悬浮在input上时显示出Xrequired="required"name="code"placeholder="请输入内容">style="pointer-events: auto;"onclick="$('#codeType').val('')">然后通过css去控制他的颜色,因为我们用的bootstrap...
  • 1、问题描述  不知道大家在使用map循环中有没有遇到...这时就需要我们在点击按钮实现换一批的同时就清空Input输入框的内容。 2、解决思路 首先在状态机中设置一个inputValue数组,用于接收map中每项输入的
  • 本文给大家分享基于js实现输入框与清空按钮联动效果,非常实用,代码简单易懂,感兴趣的朋友一起看看吧
  • 我在做一个修改信息的功能时,发现上一次提交的内容在下一次打开的记录里又显示出来,因为有一个input框每一个记录都是不一样的,为了避免操作人员手工清空内容,我打打算在新记录修改时候清空这个input,但是试了...
  • 点击右侧的清空按钮,实现输入框的值清空。 第一步:输入框设置value="{{inputValue}}"。 <view class="setInfo"> <view class="txt">手机号</view> <input class="mid" maxlength="11" ...
  • easyui清空按钮

    千次阅读 2017-08-20 13:04:11
    经过研究,可以用一个变通的解决方案:给组件加上一个“清除”按钮,当有值是,显示按钮,点击按钮清空值,当无值是,隐藏按钮。   2、函数定义 定义JS方法,为 EasyUI 中一些常用组件添加’清除’按钮及...
  • https://ant.design/components/input/#FAQ 为什么输入在变化时失去焦点prefix/suffix# 当输入动态添加或删除prefix/suffix将使React重新创建dom结构并且新输入将不会被聚焦。您可以设置一个空<span />元素...
  • 输入框的值为空是,×清空按钮不显示。当输入数值的时候,清空按钮显示出来。 点击清空按钮时,该输入框的值被清空,清空按钮隐藏。 思路: 若能获取鼠标在页面中点击的元素是什么,就可以触发相应的事件,主要是...
  • js清空input file的值

    万次阅读 多人点赞 2017-08-07 16:11:15
    在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img元素节点删除后,再点file按钮选择同一个文件后发现图片并没有...
  • 为datetimepicker插件加上清空按钮

    千次阅读 2018-08-02 17:47:06
    为datetimepicker插件加上清空按钮 最终效果如图: 好吧,其实就是将今日按钮修改为清空,哈哈哈!!! 具体修改代码如下: bootstrap-datetimepicker.js case 'today': //修改今天行为为清空输入框 by ...
  • easyui datebox添加清空按钮

    千次阅读 2017-04-24 22:04:36
    业务上需要easyui datebox可以清空,但发现其并没有清空按钮。拓展一下:   &lt;script&gt; var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: '清空', ...
  • 1.给input清空默认样式和设置按钮基本样式(class=“switch”) ​ input[type=checkbox].switch{ ​ outline: none; 清除点击默认边框为蓝色 ​ appearance: none; 清除默认边框样式 ​ ...
  • js输入框与清空按钮联动

    千次阅读 2016-09-09 09:10:51
    <!DOCTYPE html> 输入框清空按钮 <script src="js/jquery1.8.3.min.js"></script> /** * 校验当前输入框的值,如果不为空显示清空按钮 * @param ele
  • <input id="a" class="easyui-datebox" style="width:135px" data-options="buttons:buttons"> var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: '清空', handler: ...
  • 实现清空按钮的简单方法。 文章:http://blog.csdn.net/yysyangyangyangshan/article/details/43344485
  • 关于easyUI的清空按钮的方法

    千次阅读 2016-05-03 17:32:29
    清空按钮的路径如下 以下是清空方法  function doReset(){ $('#qylQuery').form('reset'); //qylQuery是表单form上的id $('input[name=nsrsbh]').val(""); //输入框的name $('inpu
  • jquery清空input中内容的方法:首先创建文件使用input标签创建文本框,同时使用button标签创建按钮;然后创建函数,在函数内获得input对象;最后使用【val()】清空input文本框的内容。本教程操作环境:windows7系统...
  • Easyui-datebox日期控件增加清空按钮

    千次阅读 2017-12-14 14:43:54
    Easyui-datebox日期控件增加清空按钮 在使用Easyui-datebox日历控件的时候,我们会发现没有清空按钮,如果直接将日志文本框中的文字删除,使用 var endDate = $('#endDate').datebox('getValue'); 会发现endDate...
  • Android 带清空按钮的EditText

    千次阅读 2014-11-04 10:19:34
    除了清空按钮,针对 密码输入框,可以控制密码的显示和隐藏 ,这个一般是在密码输入框右侧放一个SwitchButton(滑动开关),或者在输入框左下放CheckBox。CheckBox都会用,这个就不多搞了,下面粘主要代码,...
  • layui日历控件清空按钮监听

    千次阅读 2020-06-03 17:21:51
    只是点击清空,如果不做处理的话,你只会看到输入框清空,但是搜索条件并没有重置。 解决方案: 两个步骤 1.日历的回调函数里,做判断 2.搜索请求中做判断
  • 手机项目中遇到一个需求:点击input输入框外面的按钮input输入框的焦点仍然在,且键盘不收缩。 使用了label标签来解决这个需求: <label for="idName"> <input id="idName"/> <div @click=...
  • 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <divclass="ys-datetimepicker"> <inputclass="form-control"size="16"type="text"value="2015-10-01"readonly="...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,433
精华内容 14,573
关键字:

input清空按钮