如何实现input输入框自带清除按钮

最近，项目中需要，在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时，右边显示“×”按钮；输入框为空时，“×”按钮消失。难点在于获取焦点的同时，获取输入内容。

注意：本例子的样式基于bootstrap.css和jquery，不再单独添加样式。

1.html部分，将button和input框放入同一个div中，清除按钮可以使用图片或fonts图标，我使用的是bootstrap中button样式，具体位置可自行微调；

<div style="display:inline-block;position:relative;">  <div style="position:absolute;right:2px;top:-2px;cursor:pointer;display:none;" class="input_clear"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>  <input type="text" placeholder="请输入" class="input-text w200 form-control" aria-describedby="basic-addon1" name="keyword" id="keyword" style="height:35px;" >  </div>

注：button外的div样式为input_clear样式。
2.jquery代码

<script>$("input").focus(function(){  $(this).parent().children(".input_clear").show();
});
$("input").blur(function(){  if($(this).val()=='')  {  $(this).parent().children(".input_clear").hide();  }
});
$(".input_clear").click(function(){  $(this).parent().find('input').val('');  $(this).hide();
}); </script>

3.图1和图2，分别为输入框效果图和点击输入框效果后：

如何实现input输入框自带清除按钮相关推荐

【jQuery】输入框自带清除按钮
最近一个项目,需要在输入框时右边出现"X"标志,点击X即可清空,主要使用了click和blur事件,难点在于点击'X'时,input框获得焦点时出现"X"标志, ...
uni-app多个输入框带清除按钮
<template><view><view class="uni-form-item uni-column"><view class=&q ...
android搜索功能以及显示历史纪录带清除按钮
其实这部分主要是实现很多逻辑功能顺序,点击搜索出来的内容显示在一个listview中,然后历史记录又显示在另一个listview中,只要设置listview.setVisibility(View.GO ...
关于浏览器input输入框自带屎黄色样式的修改（个人笔记）
就像这个东西..这是UP的QQ邮箱...好心分享东西.别乱搞我啊嘤嘤嘤.... UP一开始习惯F12在elements查找查看了所有没有找到.咦.奇怪了.这个东西浏览器自带的.怎么改呢又不能 ...
html button点击后失去焦点,页面一个input输入框和一个取消按钮，input失去焦点时向后台发交易，点击取消按钮时不发交易...
html 取消 alt 静态页面批注:在点击按钮的时候之前就执行了blur事件,所以这个时候是无法把发送到后台的接口给拦截住的. 给2个不同的元素进行的绑定事件,这个时候2个事件还出现了重叠. 经过 ...
input change获取改变之前的值和改变之后的值_使用Vue3.0新特性造轮子 WidgetUI3.0 （Input输入框组件）
我们先看看组件效果图: 基本用法 type属性(type="password") 占位符(placeholder="请输入") 带清除按钮(clear) 输入限 ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
android 带清除功能的输入框控件
今天,看到一个很好的自定义输入框控件,于是记录一下. 效果很好: 一,自定义一个类,名为ClearEditText package com.example.clearedittext;import a ...
去除IE10自带的清除按钮
最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉.由于之前一直没有兼容过IE10,所以我专门搜了下原因. ...

如何实现input输入框自带清除按钮

如何实现input输入框自带清除按钮相关推荐

最新文章

热门文章