[HTML][CSS][JavaScript] テキストボックスの中にクリアボタンを設置する
このページのタグ:[HTML] [CSS] [JavaScript]
テキストボックスの中に消去ボタンを設置するコードを紹介します。

コード

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>

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"を指定してテキストボックスをタイトに囲む枠とします。

実行結果

実行すると下図の画面が表示されます。


通常のテキストボックスと同様に文字の入力ができます。右端の[×]アイコンにマウスポインタを合わせるとポインタの形状が変わります。この状態でクリックするとテキストボックスの内容を消去できます。


消去できました。


改良

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

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)