javascript - 如何通过在元素外部单击将元素设置为只读

Question

我有一个 <input>元素设置为 readonly默认情况下:

<input readonly id="uniqueId" type="text" ondblclick="onDoubleClick(this.id)">

如果用户双击该元素，它将被设置为可编辑:

function onDoubleClick(id){
    var element = $('#'+id);
    if (element.prop('readonly')==true) { element.prop('readonly', false);}
    else { element.prop('readonly', true); } 

显然是这个<input>元素将保持可编辑状态，直到用户再次双击它。我想知道我是否可以链接鼠标 click这发生在<input>之外元素再次将其变为只读。如何实现？

Answer 1

您可以对文档进行任何单击，使该元素变为只读。

function onDoubleClick(id) {
  var element = $('#' + id);
  if (element.prop('readonly') == true) {
    element.prop('readonly', false);
  } else {
    element.prop('readonly', true);
  }
}

function inputClicked(e) {
    e.stopPropagation();
}

$(document).click(function() {
  $('#uniqueId').prop('readonly', true);
});

input[readonly] {
  background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly id="uniqueId" type="text" onclick="inputClicked(event)" ondblclick="onDoubleClick(this.id)">