我有一个输入框。当我在输入框中单击一个文本以出现在输入框附近时,我想做什么,如果我单击 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>
所以这一切都有效,但是,当我单击时文本不会消失,文本只是切换。.
有人可以帮我使文本仅在"点击"时出现,仅在"点击
"时消失吗?谢谢
当你说点击退出时,我想你的意思是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/
如果你使用的是jQuery,你可以做类似的事情
$('#title').click(function(){
$('#TEXT_CLASS').css('display', $('#TEXT_CLASS').is(':visible') ? 'none' : 'block');
})
我建议你创建一个javascript函数来切换跨度的可见性。
function setVisilibity(span, visible)
{
span.style.display = visible ? "block" : "none";
}
默认情况下将TEXT_CLASS设置为隐藏,然后执行以下操作
$("#title").focus(functiion(){
$("#TEXT_CLASS").show();
});