активировать readonly обратно после редактирования ввода jquery

Question

Как я могу активировать 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"> 

я думаю, что что-то с focusout, мне нужно ставить только для чтения назад, когда я перейти к следующему входу, поэтому отредактированный вход не может быть изменен, если только я не нажму на него.

Answer 1

попробовать:

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

демо: http://jsfiddle.net/DkCvu/1/

Answer 2

Мне очень жаль, но я изо всех сил, чтобы увидеть точку этого. Если я получу это правильно, вы хотите, чтобы поле ввода не редактировалось до тех пор, пока оно не будет нажато или не выбрано пользователем (в основном это то, как работают поля ввода: вы не можете изменить их значение, если вы их не выбрали). После того, как эти поля ввода потеряют фокус, они должны вернуться только к чтению.
Если это так, вы слишком усложняете ситуацию. Однако это не мое дело. Лучший способ сделать это IMO - это делегировать мероприятие.

Поэтому я собрал пару скриптов, на чистом JS, на jQuery. Оба далеки от совершенства, но должны помочь вам на вашем пути.

Regular 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.