在文本框中設置清除按鈕的方法

這篇文章將為大家詳細講解有關在文本框中設置清除按鈕的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)網(wǎng)站建設公司是一家服務多年做網(wǎng)站建設策劃設計制作的公司,為廣大用戶提供了成都網(wǎng)站制作、成都網(wǎng)站建設，成都網(wǎng)站設計，廣告投放，成都做網(wǎng)站選創(chuàng)新互聯(lián)，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務歡迎致電。

有時我們會看到在文本框中的右邊會有一個圓圈里面有個×，這其實就是清除按鈕，那么如何在文本框中來實現(xiàn)這個清除按鈕呢？

在文本框中設置清除按鈕的方法

我們先來看一下設置清除按鈕具體的示例

代碼如下

HTML代碼

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
<!--
 function ClearButton_Click(){
  this.searchForm.searchBox.value="";
 }
-->
</script>
</head>
<body>
  <form action="" name="searchForm">
  <div class="searchFrame">
  <input type="text" id="search" name="searchBox" value="" class="inputBox"/>
  <div class="clearButton" onclick="ClearButton_Click()"></div>
  </div>
  </form> 
</body>
</html>

CSS代碼

style.css

.searchFrame{
  position: relative;
  display: inline-block;
}

.inputBox{
  padding-right: 20px;
  width:120px;
}

.searchFrame .clearButton{
  width: 13px;
  height: 13px;
  position: absolute;
  right: 2px;
  top: 1px;
  background: url(img/d.jpg) no-repeat left center;
  cursor: pointer;  
}

說明

上述代碼中，在文本框周圍準備一個“searchFrame”框架。將清除按鈕放在“searchFrame”框架的右端。通過設置樣式表的正確屬性將其放在右端?！皊earchFrame”框架被指定為“display：inline-block”，它是一個緊緊圍繞文本框的框架。

運行結果

在瀏覽器上將顯示如下效果

在文本框中設置清除按鈕的方法

你可以像普通文本框一樣輸入字母。如果將鼠標指針移到最右側的[×]圖標上，則指針的形狀會發(fā)生變化，此時單擊將刪除文本框的內容，效果如下

在文本框中設置清除按鈕的方法

關于在文本框中設置清除按鈕的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

標題名稱：在文本框中設置清除按鈕的方法
本文URL：http://jinyejixie.com/article26/ggesjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、定制網(wǎng)站、云服務器、域名注冊、網(wǎng)站營銷、外貿網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

在文本框中設置清除按鈕的方法