javascript - 如何使用 Enter 或 Escape 键将 INPUT 元素变为只读

Question

我有一个<input>元素默认设置为只读:

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

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

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

这个<input>元素将保持可编辑状态，直到用户再次双击它。我想知道是否有办法链接 Enter键和 Escape键，以便用户可以通过按下这些键盘键之一来结束输入，然后转动 <input>元素再次回到只读状态。如何实现？

Answer 1

这个与ENTER键配合使用的解决方案怎么样？希望对您有帮助!

更新的解决方案

$('input[type=text]').keypress(function(event){

	var keycode = (event.keyCode ? event.keyCode : event.which);
	if(keycode == '13'){
        if ($(this).prop('readonly')=== false) {
        $(this).prop('readonly', true); 
        }
        else { 
        $(this).prop('readonly', false); 
        }
    }
});
        
function onDoubleClick(elem){
    var element = $(elem);
    
    if (element.prop('readonly')=== true) {
        element.prop('readonly', false);
        if(!element.val()){
          element.val(".").val("");
        } 
        else{
        element.val($.trim(element.val(element.val()+" ").val()));
        }
    }
    else { 
        element.prop('readonly', true); 
    }
}

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