如何通过在元素外部单击来将Element设置为ReadOnly

Question

I have an <input> element set to readonly by default:

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

If the user double-clicks this element it will be set to editable with:

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

Apparently this <input> element will stay editable up until the user double clicks it again. I wonder if I could link a mouse click that happens outside of the <input> element to turn it into readonly again. How to achieve it?

Answer 1

You can make any clicks on the document make the element readonly.

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

Answer 2

Two approaches which I suggest

Method 1 - Using one

Add this inside your current function

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

Explanation: when ever you double click and make the input editable The above script will attach one click event to HTML which makes the input read-only. This event works only once as we have used one .

So technically when ever you make the input editable a new event is attached which will make input read-only on further click.

Method 2 - Checking if the click was outside the element

Add this into your script.

$('html').on('click',function(e){
  if(!$(event.target).is('#uniqueId'))
  {
    $("#uniqueId").prop('readonly', true); 
  }   
});

Explanation: when ever there is a click on you HTML you will check if the click was on the input, If not then make it readonly.

Answer 3

One option is to add a blur event to the input box, so it will make field readonly even if user hits TAB and moves out of field.

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

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

Answer 4

you could rely on the blur event to take action when it loses focus

 function onDoubleClick(elem) { console.log('toggling readonly property'); var element = $(elem); element.prop('readonly', !element.prop('readonly')); // toggle } function lostFocus(elem) { console.log('lostFocust'); var element = $(elem); element.prop('readonly', true); } 

 input { background-color: white; } input[readonly] { background-color: #ccc; } 

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

Answer 5

No jQuery needed here since we already have access to the element when using the ondblclick handler, and you can add a function to the onfocusout or onblur event handler of your element:

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

<script>
  function onDoubleClick(element){
    element.readOnly = !element.readOnly;
  }

  function onFocusOut(element) {
    element.readOnly = true;
  }
</script>

Answer 6

Same as the ondblclick attribute you can use the onblur attribute of the input element. It will run that function once that element gets blurred (out of focus).

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

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