How can I make only the focused input available?

Question

I want to always make only one input enable. To achieve that, I can disable inputs by adding disabled attribute and remove that attribute on clicking by jQuery. Like this:

$('input').on('click', function(){
  $(this).prop('disabled', false);
})

input, div{
  width: 230px;
  height: 20px;
  padding: 0;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="GET" action="/mypath">
  <input type="text" disabled ><br>
  <input type="text" disabled ><br>
  <input type="text" disabled >
</form>

Unfortunately nothing happens on click. What's wrong and how can I fix it?

Possible duplicate of [Disabled Text Input with onclick](https://stackoverflow.com/questions/18816961/disabled-text-input-with-onclick) — Alex, Sep 17 '17 at 09:12
Possible duplicate of [Event on a disabled input](https://stackoverflow.com/questions/3100319/event-on-a-disabled-input) — Phani Kumar M, Sep 17 '17 at 09:15

Shafizadeh · Accepted Answer · 2017-09-17T09:17:06.063

Disabled elements don't execute mouse events. So you should select them indirectly. One way is adding an element in front of the disabled input to simulate clicking on that element. This is the only way for complete cross browser compatibility.

Noted that you should hide/show that element on click:

$(this).hide().prev("input[disabled]").prop("disabled", false).focus();

and on blur:

$(this).prop("disabled", true).next("div").show();

Full Version Of The Code:

$('form#myform > div').on('click', function(){
  $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
})

$('form#myform > input').on('blur', function(){
  $(this).prop("disabled", true).next("div").show();
})

input, div{
  width: 230px;
  height: 20px;
  padding: 0;
  margin-top: 5px;
}

div{
  /* border: 1px solid red; */
  position: absolute;
  margin-top: -22px; /* I've used 22 instead of 20 because of input border */
  cursor: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="GET" action="/mypath">
  <input type="text" disabled >
  <div></div>
  <br>
  <input type="text" disabled >
  <div></div>
  <br>
  <input type="text" disabled >
  <div></div>
  <br>
</form>

score 0 · Answer 2 · edited Sep 17 '17 at 10:06

0

Instead of disabled, you can use readonly because disabled elements don't have events (you can check this answer).

$('input').on('click', function() {
  $('input').prop('readonly', true);
  $(this).prop('readonly', false);
})

input,
div {
  width: 230px;
  height: 20px;
  padding: 0;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="GET" action="/mypath">
  <input type="text" readonly><br>
  <input type="text" readonly><br>
  <input type="text" readonly>
</form>

edited Sep 17 '17 at 10:06

thexpand

641
13
28

answered Sep 17 '17 at 09:09

Milan Chheda

8,159
3
20
35

No I want `disabled` attribute. – iam family Sep 17 '17 at 09:11

How can I make only the focused input available?

2 Answers2