この記事で紹介した版は消去ボタンが常に表示されています。テキストボックスに文字が入力された場合だけクリアボタンを表示するコードはこちらの記事を参照してください。
HTMLページのテキストボックスの中に消去ボタンを設置するコードを紹介します。
テキストボックス内にボタンがあり、クリックすると入力されている文字がクリアされるテキストボックスがあります。
この記事では、テキストボックス内に入力文字をクリアするボタンを配置する実装コードを紹介します。
テキストボックスの右側に広いpaddingを設定し、paddingのエリアにクリアボタンを配置します。
クリアボタンは今回の実装ではdiv枠を利用しています。
<!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>
.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ブラウザで表示します。下図のページが表示されます。
テキストボックスに文字列を入力します。
マウスポインタでテキストボックス右側の[×]のアイコンをクリックします。
クリックすると入力した文字がクリアされます。
<!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>
.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"を指定してテキストボックスをタイトに囲む枠とします。
実行すると下図の画面が表示されます。
通常のテキストボックスと同様に文字の入力ができます。右端の[×]アイコンにマウスポインタを合わせるとポインタの形状が変わります。この状態でクリックするとテキストボックスの内容を消去できます。
消去できました。
