php - Onclick in a INPUTBOX - 在附近显示文本 - onclick out 文本消失

Question

我有一个输入框。当我在输入框中单击文本以显示在输入框附近时，我想要做什么，如果我单击 OUT 输入框，文本就会消失...

我试过这个，它有效但不完全：

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

然后

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

然后

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

所以这一切都有效，但是，当我点击时文本不会消失，文本只是切换..

有人可以帮我使文本仅在“单击”时出现，而仅在“单击”时消失吗？

谢谢

Answer 1

当您说点击退出时，我认为您的意思是blur.. 意味着文本框失去焦点.. 然后您需要实现 onblur 事件。

您应该实施onfocus并onblur如下所示。

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

可能你应该考虑这样做，如下所示，

   <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>

演示：http: //jsfiddle.net/LyKze/

Answer 2

如果您使用的是 jQuery，则可以执行类似的操作

$('#title').click(function(){ 
     $('#TEXT_CLASS').css('display', $('#TEXT_CLASS').is(':visible') ? 'none' : 'block'); 
})

Answer 3

我建议您创建一个 javascript 函数来切换跨度的可见性。

function setVisilibity(span, visible)
{
    span.style.display = visible ? "block" : "none";
}

Answer 4

将 TEXT_CLASS 默认设置为隐藏，然后执行以下操作

$("#title").focus(functiion(){
   $("#TEXT_CLASS").show();
});