[英]Show Div once a user has entered text into text area?
i am trying to show my div id 'content2' only once a user has typed at least 4 characters into a text area? 我仅在用户在文本区域中输入至少4个字符后才尝试显示div ID'content2'?
I am trying to use the code below but its not working, please can someone show me where i am going wrong, thanks. 我正在尝试使用下面的代码,但无法正常工作,请有人告诉我我要去哪里了,谢谢。
HTML: HTML:
<input type="text" id="field_post" name="vat" onfocus="document.getElementById('field_vat').style.background='#ffffff';" onkeyup="showDiv()" onchange="showDiv()"/>
Javascript: 使用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";
}
I would use the input
event that everyone seems to forget about. 我将使用每个人似乎都忘记的
input
事件。 It fires when tae character is entered into an input
instead of on any keydown
. 当将tae字符输入到
input
而不是keydown
任何keydown
时,它将触发。
$('#field_post').on('input', function () {
var characterCount = this.value.length;
$('#content2').text(characterCount).toggle(characterCount > 3);
});
Here is a small demo: http://jsbin.com/qoziwoha/2/edit 这是一个小演示: http : //jsbin.com/qoziwoha/2/edit
This can be done in pure JS: 这可以在纯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";
}
}
Ok, regarding the problems: 好,关于问题:
$("content2").html(currentString.length);
The css selector is looking for an element named content2
whereas you would probably like to select a div with the id of content2, so for that to happen, you should write $('#content2')
. css选择器正在寻找一个名为
content2
的元素,而您可能希望选择一个ID为content2的div,因此,为实现这一点,您应该编写$('#content2')
。 If you wanted to select a div with the class content2
, you would write $('.content2')
. 如果要选择具有
content2
类的div,则应编写$('.content2')
。
if (currentString.length <= 500 ) { /*or whatever your number is*/
display:block;
} else {
display:none;
}
In the above snippet, you're typing in display: block;
在上面的代码段中,您输入的是
display: block;
. 。 Now that's not proper javascript code.
现在,这不是正确的javascript代码。 You may be confused by the object syntax like
{ display: 'block' }
but in your code above, you don't have the wrapping curly braces {}
to create an object. 您可能会对
{ display: 'block' }
类的对象语法感到困惑,但是在上面的代码中,您没有用大括号{}
来创建对象。 (The curly brackets that are present represent the if () { } else { }
block. (出现的大括号表示
if () { } else { }
块。
The real problem, however, is that you're trying to add a css style on to the #content2
element. 但是,真正的问题是,您试图在
#content2
元素上添加CSS样式。 In which case, the jQuery syntax is: 在这种情况下,jQuery语法为:
$('#content2').css('display', 'block');
The logic seems to be correct. 逻辑似乎是正确的。 Hope this helps.
希望这可以帮助。
$("#field_post").on('keydown', function(event)
{
var len = $(this).val().length;
if(len >= 4)
{
$('#content2').text(len).show();
}
}
This will show the div once, if the input length goes below 4 characters it will not be hidden again (as per your question). 这将显示div一次,如果输入长度小于4个字符,则不会再次隐藏(根据您的问题)。 To acheive this instead change to:
为了达到这个目的,改为:
$('#content2').text(len).toggle(!!len);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.