Question

我想总是只启用一个输入。为实现这一点，我可以通过添加disabled属性来禁用输入，并在点击jQuery时删除该属性。像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

不幸的是，点击没有任何反应。什么错了，我该如何解决？

Answer 1

禁用的元素不会执行鼠标事件。所以你应该间接选择它们。一种方法是在禁用输入前添加元素以模拟单击该元素。这是完全跨浏览器兼容性的唯一方法。

注意到你应该隐藏/显示click上的元素：

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

和blur：

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

完整版本的代码：

$('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>

Answer 2

而不是disabled，您可以使用readonly，因为disabled元素没有事件（您可以检查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>

如何才能使焦点输入可用？

2 个答案: