Question

I have a inputbox. What I want to make it when I click in the inputbox a text to appear NEAR the inputbox, if I click OUT inputbox, the text disappears…

I’ve tried this, and it works but not completely:

<style type="text/css">
.hidden {display:none} 
</style>

then

<input name="title" type="text" id="title" onclick="document.getElementById ('TEXT_CLASS').className = document.getElementById ('TEXT_CLASS').className == 'hidden' ? '' : 'hidden'" />

then

<span id="TEXT_CLASS" class="hidden">the text that I want to appear on click</span>

so this all does works, BUT, the text does not disappear when I click out, the text just toggles..

Can somebody please help me in making the text appear ONLY when “onclick”, and disappear ONLY when “click out”?

Thank you

Answer 1

When you say click out, I think you mean blur.. meaning the textbox losing focus.. Then you need to implement the onblur event.

You should implement onfocus and onblur like below.

<input name="title" type="text" id="title" 
   onfocus="document.getElementById('TEXT_CLASS').className = ''";
   onblur=" document.getElementById('TEXT_CLASS').className = 'hidden';"
/>

Probably you should consider doing this like below,

   <input name="title" type="text" id="title" />
   <span id="TEXT_CLASS" class="hidden">Test Class</span>

   <script>
      var titleEl = document.getElementById('title');
      var textSpanEl = document.getElementById('TEXT_CLASS');

      titleEl.onfocus = function () {
          textSpanEl .className = '';
      }

      titleEl.onblur = function () {
          textSpanEl .className = 'hidden';
      }
   </script>

DEMO: http://jsfiddle.net/LyKze/