CODEWITHSUNDEEP
javascriptjqueryhtmlinputonclick
Erik
Erik

Reputation: 5791

Click on <div> to focus <input>

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?

Upvotes: 37

Views: 85541

Answers (6)

Ashutosh Tiwari
Ashutosh Tiwari

Reputation: 1597

  1. USING HTML ("for") :

    HTML provides this functionality. Using "for" "id" you can easily achieve it.

 <label for="idname">Click Here to Reach Input<label>
 <input id="idname" type="text">
  1. USING jQuery ("focus")

$(".classname").click(function(){

$("input").focus(); })

Upvotes: 1

Adam Seabridge
Adam Seabridge

Reputation: 2054

Try this with jquery:

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

Upvotes: 28

apnerve
apnerve

Reputation: 4829

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" />

Upvotes: 50

gdoron
gdoron

Reputation: 150313

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

LIVE DEMO

Upvotes: 5

d4rkpr1nc3
d4rkpr1nc3

Reputation: 1827

Try this :

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

Upvotes: 16

Niko Sams
Niko Sams

Reputation: 4414

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

Upvotes: 2

Related Questions