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>

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

有人可以帮助我在“onclick”时显示文字，并且只在“点击”时才会消失吗？

谢谢

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>

DEMO： 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();
});

在INPUT BOX中单击 - 显示附近的文本 - onclick out文本消失

4 个答案: