iPentec.com / Doc / HTML / CSS / JavaScript

テキストボックスの中にクリアボタンを設置する - JavaScript

HTMLページのテキストボックスの中に消去ボタンを設置するコードを紹介します。

概要

テキストボックス内にボタンがあり、クリックすると入力されている文字がクリアされるテキストボックスがあります。
この記事では、テキストボックス内に入力文字をクリアするボタンを配置する実装コードを紹介します。

実装方針

テキストボックスの右側に広いpaddingを設定し、paddingのエリアにクリアボタンを配置します。クリアボタンは今回の実装ではdiv枠を利用しています。

実装例1

コード

HTMLファイル ClearButtonInTextBox.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="ClearButtonInTextBox.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" language="javascript">
  function ClearButton_Click(){
	  this.searchForm.searchBox.value="";
  }
  </script>
</head>
<body>
  <h2>クリアボタンのあるテキストボックスのデモ</h2>
  <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ファイル ClearButtonInTextBox.css

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

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

.searchFrame .clearButton {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  background: url(clear.svg) no-repeat left center;
  cursor: pointer;
}

画像(clear.svg)

解説

テキストボックスを囲む"searchFrame"枠を用意します。クリアボタンは"searchFrame"枠の右端に配置します。スタイルシートのrightプロパティを設定することで右端に配置します。"searchFrame"枠は"display: inline-block"を指定して、テキストボックスをタイトに囲む枠とします。

実行結果

上記のページをWebブラウザで表示します。下図のページが表示されます。

テキストボックスに文字列を入力します。

マウスポインタでテキストボックス右側の[×]のアイコンをクリックします。

クリックすると入力した文字がクリアされます。

補足:文字が入力された場合のみクリアボタンを表示する

この記事で紹介した版は消去ボタンが常に表示されています。テキストボックスに文字が入力された場合だけクリアボタンを表示するコードはこちらの記事を参照してください。

実装例2:Internet Explorer / 古いWebブラウザ向けの実装

コード

HTMLファイル

<!DOCTYPE html PUBLIC 
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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>

style.css (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(clear.png) no-repeat left center;
  cursor: pointer;	
}

解説

テキストボックスを囲む"searchFrame"枠を用意します。クリアボタンは"searchFrame"枠の右端に配置します。スタイルシートのrightプロパティを設定することで右端に配置します。"searchFrame"枠は"display: inline-block"を指定してテキストボックスをタイトに囲む枠とします。