I am building a website, and I want a div to go from display: none; to display: block; as soon as a user starts typing in the first input.
I know something about jquery, but I have no idea on how to do this.
Can anyone help me?
-
1There are many good tutorials out there. You will probably need to read up on this and learn more if you plan on building a web site.Daniel Hedberg– Daniel Hedberg2013-02-10 16:45:22 +00:00Commented Feb 10, 2013 at 16:45
Add a comment
|
5 Answers
I'd use the keyup or keydown events :
$('input').on('keyup', function() {
if ( !$('div').is(':visible') ) $('div').show();
});
5 Comments
BenM
It might be better to cache the selector for the element to show, otherwise you're creating a new jQuery object every time the user keys down on the field.
blo0p3r
I'd also point out that on copy paste, or auto-fill, this will not catch it. See : stackoverflow.com/a/2826423/686036.
oninput in HTML 5 compatible browsers this would get these types of input.
adeneo
@blo0p3r - The
input event has really poor support and bugs all over the place, that's why noone uses it.blo0p3r
@adeneo Was not aware of this. I'll look more into it. Thanks! Let's say it was so buggy and had more support, this would be a good way to solve this problem?
adeneo
@blo0p3r - yes, if the
input event was better supported and worked satisfactory it would be great. Today it's common to do $('input').on('keyup paste change', function() { ...}); etc. to capture many events, the input event would make it easier, but as of today it barely works in the most modern browsers, so using it on a production website is not an option for most people.$('#input').keyup(function(){
$('your_div').css('display','block');
});
Comments
You can use the keydown event (change will only fire when the input looses focus):
var to_show = $('#your_div');
$('input').keydown(function() {
if(!to_show.is(':visible'))
{
to_show.show();
}
});
Comments
According to this answer here : https://stackoverflow.com/a/2826423/686036, you would want to use the HTML 5 syntax of oninput. This would take care of auto-fill or right click paste functions.
You're input would look like this :
<input id="myInput" type="text" />
And the JavaScript :
var myInput = document.getElementById("myInput");
myInput.addEventListener('input', myFunction(), true);
Or using JQuery if this is desired :
$('#myInput').bind('input', function() {
alert('User clicked on "foo."');
});
Now that HTML 5 is a W3C candidate recommendation, it should/will be implement in most of the new releases of browsers, if it is not yet implemented.
3 Comments
blo0p3r
The question had nothing to do with obtrusive JS of unobtrusive JS. This was for an example for the use of
oninput. But will change the answer to reflect this.blo0p3r
@BenM I disagree you should downvote on programming style that you don't "THINK" is best when this isn't specific topic - you should look at content of answer - comment on "specific answer" ie: using
oninput.BenM
Perhaps you do, but it's my prerogative unfortunately. Your answer is much better now, so I have rescinded the downvote.
You can probably use the change event with jquery :
$('input').change(function() {
$('#your-div').show();
});
1 Comment
Marcel Korpel
"if a user starts typing" sounds more like a
keypress event. change only fires after focus is lost.