如何打開INPUT元素爲只讀用回車鍵或Esc鍵

我有一個<input>元素默認設置爲只讀：如何打開INPUT元素爲只讀用回車鍵或Esc鍵

<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>元素重新轉換爲只讀。如何實現它？

來源

2016-12-01 alphanumeric

爲什麼你會_want_這是你的用戶體驗？如果用戶只需啓用它就可以輸入數據，爲什麼它需要被禁用？這似乎是一個不必要的步驟。 – Yatrix

這個工作解決方案如何與ENTER鍵一起使用。希望能幫助到你！

更新的解決方案

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

 
\t var keycode = (event.keyCode ? event.keyCode : event.which); 
 
\t 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)"/>

來源

2016-12-01 04:12:17 HenryDev

你真的想在'onDoubleClick'之外設置'keydown'處理程序，因爲它是內存泄漏：這些處理程序會隨着每次編輯而增加。 – Amadan

這很好。我可能只是使用'element.on（'keydown'，函數（e）{..}''因爲我們已經有'element'了 – alphanumeric

@alphanumeric我只更新了我的答案，使用元素而不是$（'輸入[type = text]'）。我很高興能夠幫到！ – HenryDev

在您的事件處理程序中，傳遞事件並檢查按下的鍵碼與ENTER和ESCAPE。如果它與關鍵代碼匹配，則將readonly屬性設置爲true。

來源

2016-12-01 04:10:59

如何打開INPUT元素爲只讀用回車鍵或Esc鍵

回答

相關問題