[英]Show Div once a user has entered text into text area?
我仅在用户在文本区域中输入至少4个字符后才尝试显示div ID'content2'?
我正在尝试使用下面的代码,但无法正常工作,请有人告诉我我要去哪里了,谢谢。
HTML:
<input type="text" id="field_post" name="vat" onfocus="document.getElementById('field_vat').style.background='#ffffff';" onkeyup="showDiv()" onchange="showDiv()"/>
使用Javascript:
<script>
$("#field_post").on('keydown', function(event) {
var currentString = $("#field_post").val()
$("content2").html(currentString.length);
if (currentString.length <= 500 ) { /*or whatever your number is*/
display:block;
} else {
display:none;
}
});
</script>
document.getElementById("content2").innerHTML=document.getElementById("field_post").value.length;
if (document.getElementById("field_post").value.length >=4 ) { /*or whatever your number is*/
document.getElementById("content2").style.display="block";
} else {
document.getElementById("content2").style.display="none";
}
我将使用每个人似乎都忘记的input
事件。 当将tae字符输入到input
而不是keydown
任何keydown
时,它将触发。
$('#field_post').on('input', function () {
var characterCount = this.value.length;
$('#content2').text(characterCount).toggle(characterCount > 3);
});
这是一个小演示: http : //jsbin.com/qoziwoha/2/edit
这可以在纯JS中完成:
var field = document.getElementById("field_post"),
content = document.getElementById("content2");
field.onkeydown = function(){
var len = this.value.length;
content.innerHTML = len;
if (len <= 4){
content.style.display = "none";
}else{
content.style.display = "block";
}
}
好,关于问题:
$("content2").html(currentString.length);
css选择器正在寻找一个名为content2
的元素,而您可能希望选择一个ID为content2的div,因此,为实现这一点,您应该编写$('#content2')
。 如果要选择具有content2
类的div,则应编写$('.content2')
。
if (currentString.length <= 500 ) { /*or whatever your number is*/
display:block;
} else {
display:none;
}
在上面的代码段中,您输入的是display: block;
。 现在,这不是正确的javascript代码。 您可能会对{ display: 'block' }
类的对象语法感到困惑,但是在上面的代码中,您没有用大括号{}
来创建对象。 (出现的大括号表示if () { } else { }
块。
但是,真正的问题是,您试图在#content2
元素上添加CSS样式。 在这种情况下,jQuery语法为:
$('#content2').css('display', 'block');
逻辑似乎是正确的。 希望这可以帮助。
$("#field_post").on('keydown', function(event)
{
var len = $(this).val().length;
if(len >= 4)
{
$('#content2').text(len).show();
}
}
这将显示div一次,如果输入长度小于4个字符,则不会再次隐藏(根据您的问题)。 为了达到这个目的,改为:
$('#content2').text(len).toggle(!!len);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.