Click on <div> to focus <input>

Question

I have a series of input elements each with a few <div> tags separate.
I like to have if where I can click on any of the <div> and it will focus on an input.
Is this possible and if so can anyone give ideas on script?

Solution 1

Try this with jquery:

$('#yourdiv').click(function() {
     $('#yourfield').focus();
});

Solution 2

I don't see a reason why you need JS to do this when such feature is already provided in HTML.

<label for="YOURID">The clickable region<label>
<input id="YOURID" type="text" />

Solution 3

Try this :

<input id="myInput" />
<div onclick="document.getElementById('myInput').focus(); return false;"></div>

Solution 4

$('div').click(function() {
    $(this).find('input[type="text"]').focus();
});​

LIVE DEMO

Solution 5

1. using javascript (call .focus() on the input element)
2. using wrapped around your div (makes only sense if the div is the label)

View more solutions