2015-07-20 50 views
3

如何隐藏div在填充文本框的同时使用JavaScript的类?如何在文本框填充时隐藏div类

我想隐藏类loadData文本框(t1)被填充。

示例代码:

<input type="text" name="t1" placeholder="search"> 


<div class="loadData"> 
    // some content here.... 
</div> 
+0

你是什么意思',而文本框(T1)filled' – Tushar

+0

对不起,我忘了添加输入类型值。现在看代码 –

回答

3

使用jQuery。检查keyup事件上的文本字段的值,并相应地执行操作。

$('input[type="text"]').on('keyup', function() { 
    ($.trim($(this).val()) != '') ? $('.loadData').hide() : $('.loadData').show(); 
}) 

FIDDLE

+3

'$(':text')。on('keyup',function(){('。loadData')。toggle($。trim($(this) .val())); }); ' – Tushar

+0

你可以在你的答案中添加这个'更新/编辑' – Tushar

+0

@Tushar但是它不能正确工作,因为'toggle'不需要这样的参数。 https://jsfiddle.net/vd5azw1g/ –

1

用户jQuery's模糊函数。

<script> 
$(function(){ 
    $("[name=t1]").blur(function(){ 
    if ($(this).val() == '') { 
     $(".loadData").hide(); 
    } 
    }); 
}) 
</script> 

说明:

您在blur事件文本框的调用函数。

这意味着用户已经填满了文本框并且想要离开文本框。

在这个函数体中,隐藏类loadData的div。

+0

它将如何决定文本框是否被填充? –

+0

@ b0s3,回答更新,请检查。 – Pupil

+0

这更好! –

4
window.onload = function() { 
    elements = document.getElementsByName("t1"); 
    var divs = document.getElementsByClassName("loadData"); 
    elements.onblur = function() { divs.style.visibility="hidden"; }; 
    };  
+1

'div'会发生'blur'事件,我认为它只发生在'input'元素 – Tushar

+0

如何决定'textbox'是否被填充? –

+0

ya感谢您重播我 –

-1

添加onblur="showdiv()"到输入框,并在你的JavaScript添加此功能

function showdiv()  
{  
    var a=document.getElementsByClassName('loadData'); 
    a[0].style.visibility='hidden';  
}