Кнопка очистить для текстового поля

09.08.2015

<html>
<head>
  <title>Clear Query Field Test - v0.01</title>

<link type="text/css" rel="stylesheet" media="screen" href="jqtouch-1.0-beta-2-r109/jqtouch/jqtouch.css" />  

<script type="text/javascript" src="jqtouch-1.0-beta-2-r109/jqtouch/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="jqtouch-1.0-beta-2-r109/jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="js/jquery.watermark.min.js"></script>

<script type="text/javascript">
var jQT = $.jQTouch({
  icon: 'kilo.png',
  statusBar: 'black',
  slideSelector: 'body > * > ul li > a, .forceSlide, area', 
  flipSelector: '.flip, .forceFlip',
  useFastTouch: true
});

function initClearQueryLink(query,clearQuery){
  clearQuery.setAttribute("title","Clear");
  clearQuery.addEventListener("mousedown",clearQueryBox,true);
  query.addEventListener("keyup",_handleClearQueryLink,false)
}

function _handleClearQueryLink(){
  var query=document.getElementById("q");
  var clearQuery=document.getElementById("clearQuery");
  if(clearQuery)
  if(query.value.length>0){
    clearQuery.style.display="inline";
    clearQuery.style.visibility="visible"
  } else{
    clearQuery.style.display="none";
    clearQuery.style.visibility="hidden"
  }
}

function clearQueryBox(event){
  var query=document.getElementById("q");
  var clearQuery=document.getElementById("clearQuery");
  query.value="";
  clearQuery.style.display="none";
  clearQuery.style.visibility="hidden";
  //// hideSuggest();
  if(event)event.preventDefault()
}

</script>

<script type="text/javascript">

$(document).ready( function() { 
  var query=document.getElementById("q");
  var clearQuery=document.getElementById("clearQuery")
  initClearQueryLink(query, clearQuery);
});

</script>

</head>
<body>

    <div id="search-results">

      <div class="clear"></div>

      <div class="searchbar">
        <form action="" method="post" id="cse-search-box">
        <input type="text" name="q" id="q" class="searchbox" autocapitalize="off" style="margin: 20px 0 0 20px; padding: 0 30px 0 0; font: 17px Arial;"/>
          <a class="clear" id="clearQuery" href="#">
              <img src="images/icon_clear.png"  width="16px" height="16px" class="clear-button" style="border: 0; padding: 0 20px 0 0; position: absolute; top: 23px; left: 220px;"/>
          </a>
        </form>
      </div>

      <div class="clear"></div>

    </div>

</body>
</html>

no-js

<html>
<head>
  <title>Clear Query Field Test - v0.02 (no external JS)</title>

<script type="text/javascript">

function initClearQueryLink(query,clearQuery){
  clearQuery.setAttribute("title","Clear");
  clearQuery.addEventListener("mousedown",clearQueryBox,true);
  query.addEventListener("keyup",_handleClearQueryLink,false)
}

function _handleClearQueryLink(){
  var query=document.getElementById("q");
  var clearQuery=document.getElementById("clearQuery");
  if(clearQuery)
  if(query.value.length>0){
    clearQuery.style.display="inline";
    clearQuery.style.visibility="visible"
  } else{
    clearQuery.style.display="none";
    clearQuery.style.visibility="hidden"
  }
}

function clearQueryBox(event){
  var query=document.getElementById("q");
  var clearQuery=document.getElementById("clearQuery");
  query.value="";
  clearQuery.style.display="none";
  clearQuery.style.visibility="hidden";
  //// hideSuggest();
  if(event)event.preventDefault()
}

function initClear() {
  var query=document.getElementById("q");
  var clearQuery=document.getElementById("clearQuery")
  initClearQueryLink(query, clearQuery);
}

</script>

</head>
<body onload="initClear();">

    <div id="search-results">

      <div class="clear"></div>

      <div class="searchbar">
        <form action="" method="post" id="cse-search-box">
        <input type="text" name="q" id="q" class="searchbox" autocapitalize="off" style="margin: 20px 0 0 20px; padding: 0 40px 0 0; font: 17px Arial;"/>
          <a class="clear" id="clearQuery" href="#">
              <img src="images/icon_clear.png"  width="16px" height="16px" class="clear-button" style="border: 0; padding: 0 20px 0 0; position: absolute; top: 31px; left: 240px;"/>
          </a>
        </form>
      </div>

      <div class="clear"></div>

    </div>

</body>
</html>

Оригинал