在編輯輸入jquery後激活readonly

如何在完成輸入編輯後激活readonly？在編輯輸入jquery後激活readonly

這是我的代碼現在：

<script type="text/javascript"> 
$(document).ready(function() { 
     $("input").bind('click focus', function(){ 
       $('input').each(function(){ 
         $(this).attr("readonly", false); 
         }); 
       }); 
     }); 
</script>

像這樣的輸入：

<input type="text" class="m" readonly="readonly" id="anchor_text">

我認爲一些與事件的內容，我需要把只讀回來時，我去下一個輸入，所以編輯後的輸入不能改變，除非我再次點擊它。

來源

2012-06-14 Abude

$（this）.removeAttr（「readonly」）; –

你是否希望它是隻讀的，但該用戶可以同時編輯它？你能解釋一下你在這裏做什麼？ – 2012-06-14 11:28:03

我想刪除當我點擊輸入或選項卡，並不是全部刪除它 – Abude

嘗試：

$("input").bind('click focus', function(){ 
    $(this).attr("readonly", false); 
    }).bind('blur', function(){ 
    $(this).attr("readonly", true); 
});

演示：http://jsfiddle.net/DkCvu/1/

來源

2012-06-14 11:26:23 mgraph

@Abude你應該只做這個。最初設置爲只讀可能會給用戶造成錯誤的印象。 – Sujay

它不會把我只點擊選項卡後只讀回到下一個輸入或當我點擊當前輸入 – Abude

我很抱歉，但我掙扎地看到了這一點。如果我明白了這一點，你希望輸入字段而不是是可編輯的，直到用戶點擊或選擇（這基本上是輸入字段如何工作：除非您選擇它們才能更改它們的值）。在這些輸入字段失去焦點之後，它們應該回到只讀狀態。
如果是這種情況，那麼你就過於複雜了。但是，這不關我的事。完成IMO完成這一任務的最佳方式是委派事件。

因此，我在jQuery上整理了一些關於純JS的小提琴。兩者都遠非完美，但應該幫助你。

定期JS（fiddle here）：

var dv = document.getElementById('inputDiv'); 
if (!dv.addEventListener) 
{ 
    dv.attachEvent('onfocusin',switchRO); 
    dv.attachEvent('onfocusout',switchRO); 
} 
else 
{ 
    dv.addEventListener('focus',switchRO,true); 
    dv.addEventListener('blur',switchRO,true); 
} 

function switchRO (e) 
{ 
    var self; 
    e = e || window.event; 
    self = e.target || e.srcElement; 
    if (self.tagName.toLowerCase() === 'input') 
    { 
     switch (e.type) 
     { 
      case 'onfocusin': 
      case 'focus': 
       self.removeAttribute('readonly'); 
      break; 
      default: 
       self.setAttribute('readonly','readonly'); 
     } 
    } 
    return true; 
}

在jQuery中，這可能是這個樣子（jQuery的有.on，jsfiddle here）：

$('#inputDiv input').on(
    { 
     focus: function() 
     { 
      $(this).removeAttr('readonly'); 
     }, 
     blur: function() 
     { 
      $(this).attr('readonly','readonly'); 
     } 
    });

我都張貼jQuery和純JS ，因爲我發現它知道jQuery中的屏幕背後發生了什麼。

來源

2012-06-14 12:08:27

在編輯輸入jquery後激活readonly

回答

相關問題