How to return prop('readonly', true) on click outside input?

Question

JavaScript

Hello everyone, by default the input is not editable, when you click on the input it becomes editable.
The question is, how to block it again when clicking outside the input?

Sample code: https://jsfiddle.net/pq496vje/

Answer 1

focusin & focusout

Answer 2

You can use the closest() function