input标签中最后加X实现清空效果

最新推荐文章于 2024-02-05 10:42:51 发布

super_.

最新推荐文章于 2024-02-05 10:42:51 发布

阅读量9.9k

点赞数 2

分类专栏： JavaScript 文章标签： input最后加X 子元素与父元素的定位 input的X清空

本文链接：https://blog.csdn.net/super_DuoLa/article/details/82590425

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

在此使用的方法是定位：按钮相对于父容器的定位

PS:在此处的清空按钮我用的是背景图片，除此之外还可以直接在button上写值

1.先看效果图

2.再看项目结构

按钮背景图：

3.最后看实现该功能的相关代码(代码里有详细的注释)：代码分三部分(自上而下)

(1).CSS样式的设置：重要的地方都加了注释，涉及到数值的都是可以自定义的

 <style type="text/css">
      .mcontainer{
		width:400px;
	        height: 200px;
		border:1px  solid  red;
		text-align: center;
		margin: 300px  auto;
	        position:relative;  /*父容器的相对定位  */
	  }
		   
	 .mname{
	    margin-top: 20px;
	   }
		   
	  .mclear{
	        border:0;     /*去掉button按钮的棱角(边框)   */
		position:absolute;    /*子元素的绝对定位    */
	        top:26px;   left:251px;   /* 按钮的绝对定位的位置   */
		background: url(image/clear.png) no-repeat;   /* 按钮的背景图片  */
		width:25px;  height:25px;     /* 按钮的大小 */
	        background-size:13px 13px;    /* 背景图片的大小  */
	    }
 </style>

(2).html代码

<body>
   <div class="mcontainer">
      <input  type="text"     class="mname"    id="mname"   placeholder="请输入用户名" />
      <button type="button"   class="mclear"   onclick="mclear()" ></button>  
   </div>
</body>

(3).javascript代码：需要引入jquery的js文件

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	   
<script language="javascript"  type="text/javascript">
	//输入框的清空事件
	function mclear(){
	     $("#mname").val("");  //根据id清空
	}
</script>

super_.

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
input标签中最后加X实现清空效果

在此使用的方法是定位：按钮相对于父容器的定位PS:在此处的清空按钮我用的是背景图片，除此之外还可以直接在button上写值1.先看效果图2.再看项目结构按钮背景图： 3.最后看实现该功能的相关代码(代码里有详细的注释)：代码分三部分(自上而下) (1).CSS样式的设置：重要的地方都加了注释，涉及到数值的都是可...
复制链接

扫一扫