Link to home
Start Free TrialLog in
Avatar of Xbradders
Xbradders

asked on

Allow users to type with no physical input texbox

I found a site that allows the user to input text with no physical textbox, and have the search results displayed in a div, overlaid over the main web page.  I can't seem to find an example of how to do this.  Anyone have any suggestions?  

Here's the site that has the example:
http://www.mtv.com/artists/
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Looks like a sophisticated modal popup to me. In theory, you have a modal popup (div container for example) with a transparent background and an X for a "close" link. Inside the modal you have a textbox with no borders, large green font, and a transparent background. You use a jquery plugin to make the auto-suggestion work. When a user starts typing, trigger the modal popup which makes the semi-transparent screen appear. This is just a div with a black background 100% width and height, opacity at about 50%, position:fixed;top:0;left:0. The modal popup is position:fixed as well to keep it in the view screen. As they type, the auto-suggestion fills in the possibilities as links to the selected page.
Avatar of Xbradders
Xbradders

ASKER

OK, I'm starting to get the idea.  I have created the modal div that is coming along.  But how do I get it to launch when a user just starts typing anywhere?  I was thinking of using the KeyPress javascript event, but on what control?
It fires when a key is pressed on the keyboard with focus on the browser window.

http://www.w3schools.com/jsref/event_onkeypress.asp
Thanks, I knew what the keypress event did, I just wasn't sure where to fire it.  I used document.onkeyup, which did the trick.

Forgive me if I'm running to far with this post, but I have another question:
When my modal div opens up, how do I get the textbox to take the focus?  So the users typing shows up in it?
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial