Devre dışı bırakılmış bir girdideki olay

Görünüşe göre bir engelli <input>herhangi bir olay tarafından ele alınmıyor

Bu soruna geçici bir çözüm bulmak için bir yol var mı?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

Burada, etkinleştirmek için girişe tıklamam gerekiyor. Ancak etkinleştirmezsem giriş gönderilmemelidir.

Devre dışı bırakılan öğeler fare olaylarını tetiklemez. Çoğu tarayıcı, devre dışı bırakılan öğeden kaynaklanan bir olayı DOM ağacına yayar, böylece olay işleyicileri kap öğelerine yerleştirilebilir. Ancak, Firefox bu davranışı sergilemez, devre dışı bırakılmış bir öğeye tıkladığınızda hiçbir şey yapmaz.

Daha iyi bir çözüm düşünemiyorum, ancak tam çapraz tarayıcı uyumluluğu için, bir öğeyi devre dışı girişin önüne yerleştirebilir ve o öğeye tıklayabilirsiniz. İşte ne demek istediğimin bir örneği:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

Örnek: http://jsfiddle.net/RXqAm/170/ ( propyerine jQuery 1.7 kullanacak şekilde güncellendi attr).

Belki de alanı salt okunur yapabilir ve gönderildiğinde tüm salt okunur alanları devre dışı bırakabilirsiniz

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

ve girdi (+ script)

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Devre dışı bırakılan öğeler bazı tarayıcılarda tıklamaları "yerler" - ne bunlara yanıt verir ne de öğenin veya herhangi bir kapsayıcısının herhangi bir yerinde olay işleyicileri tarafından yakalanmasına izin vermezler.

IMHO bunu "düzeltmenin" en basit ve en temiz yolu (aslında OP'nin yaptığı gibi devre dışı bırakılmış öğelerin tıklamalarını yakalamanız gerekiyorsa) sayfanıza aşağıdaki CSS'yi eklemektir:

input[disabled] {pointer-events:none}

Bu, devre dışı bırakılan bir girişe yapılan tıklamaların üst öğeye düşmesini sağlar; burada bunları normal şekilde yakalayabilirsiniz. (Birkaç devre dışı girişiniz varsa, zaten bu şekilde yerleştirilmemişlerse, her birini kendi ayrı bir kaba koymak isteyebilirsiniz - ekstra <span>veya bir <div>, örneğin - sadece hangi engelli girişini ayırt etmeyi kolaylaştırmak için tıklandı).

Dezavantajı, bu hile ne yazık ki pointer-eventsCSS özelliğini desteklemeyen eski tarayıcılar için işe yaramaz . (IE 11, FF v3.6, Chrome v4'ten çalışmalıdır ): caniuse.com/#search=pointer-events

Eski tarayıcıları desteklemeniz gerekiyorsa, diğer yanıtlardan birini kullanmanız gerekir!

Ben alternatif - CSS kullanın öneririz:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

devre dışı bırakılmış öznitelik yerine. Ardından, devre dışı bırakılmış bir girişi simüle etmek için kendi CSS özniteliklerinizi ekleyebilirsiniz, ancak daha fazla kontrolle.

Bunun yerine disabledkullanmayı düşünebilirsiniz readonly. Bazı ekstra CSS ile girdiyi disabledalan gibi görünecek şekilde biçimlendirebilirsiniz.

Aslında başka bir sorun daha var. Olay, changeyalnızca öğe bir disabledalanı göz önünde bulunduran mantıksal olmayan odağı kaybettiğinde tetiklenir . Muhtemelen başka bir çağrıdan bu alana veri aktarıyorsunuzdur. Bu işi yapmak için 'bind' etkinliğini kullanabilirsiniz.

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

VEYA bunu jQuery ve CSS ile yapın!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

Bu şekilde öğeyi devre dışı bırakmış olursunuz ve hiçbir işaretçi olayı tetiklenmez, ancak yayılmaya izin verir ve gönderilirse yoksaymak için 'yoksay' özniteliğini kullanabilirsiniz.

Bugün böyle bir sorunumuz vardı, ancak HTML'yi değiştirmek istemedik. Bunun için mouseenter etkinliğini kullandık

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Başka bir çözüm buldum:

<input type="text" class="disabled" name="test" value="test" />

"Engelli" sınıfı opaklıkla engelli elemanı taklit eder:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

Ardından, öğe devre dışı bırakılmışsa etkinliği iptal edin ve sınıfı kaldırın:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

buradaki öneri de bu soru için iyi bir aday gibi görünüyor

Devre dışı bırakılmış bir öğede tıklama etkinliği gerçekleştiriliyor mu? Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});