如何在文本框填充时隐藏div类

问题描述：

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

我想隐藏类loadData而文本框（t1）被填充。

示例代码：

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


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

你是什么意思'，而文本框（T1）filled' – Tushar

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

答

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

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

FIDDLE

'$（'：text'）。on（'keyup'，function（）{（'。loadData'）。toggle（$。trim（$（this） .val（）））; }）; ' – Tushar

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

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

答

用户jQuery's模糊函数。

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

说明：

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

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

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

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

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

这更好！ –

答

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

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

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

ya感谢您重播我 –

答

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

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

如何在文本框填充时隐藏div类

相关推荐