iPentec.com  /  Doc  /  HTML  /  CSS  /  JavaScript

目次

テキストボックスに文字が入力されている場合にだけ、テキストボックスの中にクリアボタンを設置する - JavaScript

テキストボックスに文字が入力されている場合だけ、テキストボックスの中に消去ボタンを設置するコードを紹介します。

概要

こちらの記事でテキストボックスの中にクリアボタンを設置するコードを紹介しましたが、 紹介したコードでは、消去ボタンが常に表示されている動作になります。 テキストボックスに文字が入力された場合だけクリアボタンを表示したほうがシンプルな見栄えにできます。
この記事では、テキストボックスに文字が入力されている場合のみ、テキストボックス内にクリアボタンを表示するコードを紹介します。

実装例1

ClearButtonInTextBoxEnteredText.html (HTMLファイル)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="ClearButtonInTextBoxEnteredText.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" language="javascript">
    function Form_Load() {
      if (this.searchForm.searchBox.value.length > 0) {
        var clear_button = document.getElementById("clear_button");
        clear_button.style.visibility = "visible";
      }
    }

    function ClearButton_Click(){
      this.searchForm.searchBox.value = "";
      this.searchForm.searchBox.focus();

      var clear_button = document.getElementById("clear_button");
      clear_button.style.visibility = "hidden";
    }

    function TextBox_KeyUp() {
      var clear_button = document.getElementById("clear_button");
      var text_box_value = this.searchForm.searchBox.value;

      if (text_box_value == "") {
        clear_button.style.visibility = "hidden";
      } else {
        clear_button.style.visibility = "visible";
      }
    }
  </script>
</head>
<body onload="Form_Load()">
  <h2>文字が入力された場合にテキストボックスにクリアボタンを表示</h2>
  <form action="" name="searchForm">
    <div class="searchFrame">
      <input type="text" id="search" name="searchBox" value="" class="inputBox" onkeyup="TextBox_KeyUp()" />
      <div id="clear_button" class="clearButton" onclick="ClearButton_Click()"></div>
    </div>
  </form>
</body>
</html>
ClearButtonInTextBoxEnteredText.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;
  visibility:hidden;
}
画像(clear.svg)

解説

基本はこちらの記事で紹介したコードと同じです。 今回のコードではクリアボタンのスタイルにvisibility:hidden;を付加し、デフォルトでボタンを非表示にします。 また、テキストボックスに onkeyup="ClearButton_KeyUp() を記述し、テキストボックスでキーの入力がなされたらクリアボタンを表示します。

クリアボタンはgetElementByIdでIDを指定してクリアボタンの要素を取得しstyleプロパティのvisibilityプロパティを変更して表示します。
クリアボタンの表示判定時にテキストボックスに入力された文字列を確認し、テキストボックスに文字列が入力されていない場合は、クリアボタンを非表示にします。
function TextBox_KeyUp() {
  var clear_button = document.getElementById("clear_button");
  var text_box_value = this.searchForm.searchBox.value;

  if (text_box_value == "") {
    clear_button.style.visibility = "hidden";
  } else {
    clear_button.style.visibility = "visible";
  }
}

また、テキストボックスに文字を入力した状態でブラウザのリロードボタンを押された場合、クリアボタンが表示されなくなります。この現象を防ぐため、BodyのonLoadイベントで"Form_Load()"関数を実行します。Form_Load()関数ではテキストボックスの内容を確認しテキストボックスが空でなければクリアボタンを表示する処理をします。
function Form_Load() {
  if (this.searchForm.searchBox.value.length > 0) {
    var clear_button = document.getElementById("clear_button");
    clear_button.style.visibility = "visible";
  }
}

実行結果

作成したHTMLファイルを表示します。下図の画面が表示されます。


文字列を入力します。文字列を入力すると右側に[×]のクリアボタンが表示されます。


マウスポインタで[×]ボタンをクリックします。


クリックすると入力文字が消去されます。


入力した文字列をバックスペースやデリートキーで削除します。


テキストボックスの文字列が空になると、クリアボタンが非表示になります。

実装例2:マウスのペースト操作にも対応する場合

先のコードではマウス操作でテキストボックスに文字列をペーストした場合はクリアボタンが表示されません。


マウス操作でペーストされた場合には、KeyUpイベントが発生しないため、paste イベントの実装が必要になります。 pasteイベントでペーストの操作を検出する方法の詳細はこちらの記事を参照してください。

コード

以下のHTML,CSSファイルを作成します。
ClearButtonInTextBoxEnteredTextAP.html (HTMLファイル)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="ClearButtonInTextBoxEnteredTextAP.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" language="javascript">
    function Form_Load() {
      if (this.searchForm.searchBox.value.length > 0) {
        var clear_button = document.getElementById("clear_button");
        clear_button.style.visibility = "visible";
      }

      var text_box = document.getElementById("search");
      text_box.addEventListener('paste', TextBox_OnPaste);

    }

    function ClearButton_Click(){
      this.searchForm.searchBox.value = "";
      this.searchForm.searchBox.focus();

      var clear_button = document.getElementById("clear_button");
      clear_button.style.visibility = "hidden";
    }

    function TextBox_KeyUp() {
      var clear_button = document.getElementById("clear_button");
      var text_box_value = this.searchForm.searchBox.value;

      if (text_box_value == "") {
        clear_button.style.visibility = "hidden";
      } else {
        clear_button.style.visibility = "visible";
      }
    }

    function TextBox_OnPaste(evt) {
      var clear_button = document.getElementById("clear_button");
      var pastedText = e.clipboardData.getData('text');

      if (pastedText == "") {
        clear_button.style.visibility = "hidden";
      } else {
        clear_button.style.visibility = "visible";
      }
    }

  </script>
</head>
<body onload="Form_Load()">
  <h2>文字が入力された場合にテキストボックスにクリアボタンを表示</h2>
  <form action="" name="searchForm">
    <div class="searchFrame">
      <input type="text" id="search" name="searchBox" value="" class="inputBox" onkeyup="TextBox_KeyUp()"/>
      <div id="clear_button" class="clearButton" onclick="ClearButton_Click()"></div>
    </div>

    <!--
  <hr />
  通常のテキストボックス: <input type="text" id="search" name="searchBoxNormal" value="" class="" />
  -->
  </form>
</body>
</html>
ClearButtonInTextBoxEnteredTextAP.css(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;
  visibility: hidden;
}

解説

ページの読み込み時に、テキストボックスの要素に対して、pasteイベントリスナを設定します。
  var text_box = document.getElementById("search");
  text_box.addEventListener('paste', TextBox_OnPaste);

テキストボックスにペーストした際に、ペースト文字列を確認し、文字列が空でなければクリアボタンをテキストボックスに表示します。
    function TextBox_OnPaste(evt) {
      var clear_button = document.getElementById("clear_button");
      var pastedText = e.clipboardData.getData('text');

      if (pastedText == "") {
        clear_button.style.visibility = "hidden";
      } else {
        clear_button.style.visibility = "visible";
      }
    }

実行結果

Webブラウザでページを表示し、マウス操作でテキストボックスにペーストします。


ペーストすると、すぐにクリアボタンが表示されます。

実装例3 : Internet Explorer / 古いブラウザ向け

コード

HTMLファイルを作成します。
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>
<title>Clear Button in TextBox</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" language="javascript">
<!--
 function Form_Load(){
    if (this.searchForm.searchBox.value.length > 0){
     target = document.getElementById("clear_button");
     target.style.visibility = "visible";
   }
 }

 function ClearButton_Click(){
    this.searchForm.searchBox.value="";
    this.searchForm.searchBox.focus();
	
   target = document.getElementById("clear_button");
   target.style.visibility = "hidden";
 }

 function ClearButton_KeyDown(){
   target = document.getElementById("clear_button");
   target.style.visibility = "visible";
 }
-->
</script>

</head>
<body onload="Form_Load()">
  <form action="" name="searchForm" >
  <div class="searchFrame">
  <input type="text" id="search" name="searchBox" value="" class="inputBox" 
    onkeydown="ClearButton_KeyDown()"/>
  <div id="clear_button" 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;
  visibility:hidden;
}

解説

基本はこちらの記事で紹介したコードと同じです。今回のコードではクリアボタンのスタイルに"visibility:hidden;"を付加し、デフォルトでボタンを非表示にします。また、テキストボックスに"onclick="ClearButton_Click()"を追記し、テキストボックスでキーの入力がなされたらクリアボタンを表示します。

クリアボタンはgetElementByIdでIDを指定してクリアボタンの要素を取得しstyleプロパティのvisibilityプロパティを変更して表示します。
function ClearButton_KeyDown(){
  target = document.getElementById("clear_button");
  target.style.visibility = "visible";
}

また、テキストボックスに文字を入力した状態でブラウザのリロードボタンを押された場合、クリアボタンが表示されなくなります。この現象を防ぐため、BodyのonLoadイベントで"Form_Load()"関数を実行します。Form_Load()関数ではテキストボックスの内容を確認しテキストボックスがからでなければクリアボタンを表示する処理をします。
function Form_Load(){
  if (this.searchForm.searchBox.value.length > 0){
    target = document.getElementById("clear_button");
    target.style.visibility = "visible";
  }
}

実行結果

作成したHTMLファイルを表示します。下図の画面が表示されます。


文字を入力すると[×]のクリアボタンが表示されます。クリアボタンにマウスポインタを移動させるとポインタの形状が変わります。


[×]ボタンをクリックするとテキストボックスの内容は消去されます。


テキストボックスに文字を入力した後、ページをリロードします。リロード後もクリアボタンは表示されています。


著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-06-05
改訂日: 2024-06-04
作成日: 2012-02-06
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.