CSS kullanarak form alanlarını nasıl devre dışı bırakabilirim?

CSS kullanarak form alanlarını devre dışı bırakmak mümkün mü? Elbette devre dışı bırakılan özniteliği biliyorum, ancak bunu bir CSS kuralında belirtmek mümkün mü? Gibi bir şey -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

Sormamın nedeni, form alanlarının otomatik olarak oluşturulduğu ve alanların bazı kurallara (Javascript'te çalışan) göre gizlendiği / gösterildiği bir uygulamam olması. Şimdi alanları devre dışı bırakmayı / etkinleştirmeyi desteklemek için genişletmek istiyorum, ancak form alanlarının stil özelliklerini doğrudan değiştirmek için kuralların yazılma şekli. Bu yüzden şimdi kural motorunu niteliklerin yanı sıra form alanlarının stilini de değiştirmek için genişletmeliyim ve bir şekilde idealden daha az görünüyor.

CSS'de görünür ve görüntüleme özelliklerinizin olması, ancak etkinleştirme / devre dışı bırakmamanız çok ilginç. Halen çalışmakta olan HTML5 standardında veya standart olmayan bir şeyde (tarayıcıya özgü) böyle bir şey var mı?

Bu yardımcı olabilir:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Güncelleme:

ve sekme dizininden devre dışı bırakmak istiyorsanız, dizini şu şekilde kullanabilirsiniz:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Devre dışı bırakılan efekti CSS kullanarak taklit edebilirsiniz.

pointer-events:none;

Ayrıca renkleri vb. Değiştirmek de isteyebilirsiniz.

Kurallar JavaScript'te çalıştığından, neden javascript (veya benim örneklerimde jQuery) kullanarak bunları devre dışı bırakmıyorsunuz?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

GÜNCELLEME

Aşağıdaki attryorumlarda belirtildiği gibi, işlev artık bunun birincil yaklaşımı değildir. Bu şimdi propfonksiyon ile yapılır .

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

CSS'de görünür ve görüntüleme özelliklerinizin olması, ancak etkinleştirme / devre dışı bırakmamanız çok ilginç.

Bunun çok meraklı olduğunu düşündüğün çok merak ediyor. CSS'nin amacını yanlış anlıyorsunuz. CSS, form öğelerinin davranışını değiştirmeyi amaçlamaz . Sadece stillerini değiştirmek için. Bir metin alanını gizlemek, metin alanının artık orada olmadığı veya formu gönderdiğinizde tarayıcının verilerini göndermeyeceği anlamına gelmez. Tek yaptığı kullanıcının gözünden gizlemek.

Alanlarınızı gerçekten devre dışı bırakmak için HTML'deki niteliği veya JavaScript'teki DOM özelliğini kullanmanız gerekir .disableddisabled

Metin Kutusunu devre dışı bırakmak için CSS kullanamazsınız. çözüm HTML Özelliği olacaktır.

disabled="disabled"

Pratik çözüm, girişi gerçekten gizlemek için CSS kullanmaktır.

Bunu doğal sonucuna götürmek için, her bir gerçek giriş (biri etkin ve biri devre dışı) için iki html girişi yazabilir ve daha sonra bunları göstermek ve gizlemek için CSS'yi kontrol etmek için javascript kullanabilirsiniz.

bir şeyi ilk kez yanıtlıyor ve görünüşe göre biraz geç ...

Zaten kullanıyorsanız, javascript ile yapmayı kabul ediyorum.

Genellikle kullandığım gibi kompozit bir yapı için, elemanların kullanıcı etkileşimini engellemek ve tüm yapıyı manipüle etmeden stil oluşturmaya izin vermek için bir css sözde öğesi yaptım.

Örneğin:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

disabledSargı üzerine bir sınıf yerleştirebilirimdiv

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

Bu, içindeki metni grileştirir divve kullanıcı tarafından kullanılamaz hale getirir.

Örneğim JSFiddle

Ben her zaman kullanıyorum:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

ve daha sonra giriş alanına css sınıfının uygulanması:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

input [name = kullanıcı adı] {devre dışı: true; /* Çalışmıyor */ }

Bu sorunun oldukça eski olduğunu biliyorum, ancak bu sorunla karşılaşan diğer kullanıcılar için, girişi devre dışı bırakmanın en kolay yolunun sadece ': devre dışı'

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

Gerçekte, eklediğiniz koşula bağlı olarak otomatik olarak devre dışı bırakılacak javascript veya jquery ile girdiyi dinamik / otomatik olarak devre dışı bırakacak bir komut dosyanız varsa.

Örnek jQuery'de:

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

Umarım CSS'deki cevap yardımcı olur.

Korkarım bunu yapamazsınız, ancak alanları öznitelikler eklemek istemiyorsanız jQuery'de aşağıdakileri yapabilirsiniz. Bunu <head></head>etiketinizin içine yerleştirin

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

DOM'daki alanları (JS ile) oluşturuyorsanız, bunun yerine bunu yapmalısınız:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Bu, kritik olmayan bir amaç için giriş öğenizin üstüne bir kaplama koyarak yapılabilir. İşte benim saf HTML ve CSS örneğim.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

Bu amaçla CSS kullanmanın bir yolu yoktur. Tavsiyem, girdilere uygulanan css sınıfını atadığınız veya değiştirdiğiniz bir javascript kodu eklemektir. Bunun gibi bir şey :

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

pointer-events: none;Girişin etiketli denetimi veya tabindex aracılığıyla hala erişilebilir olması sorununu çözen bir çözüm varyasyonu , girdiyi devre dışı bırakılmış metin girişi olarak biçimlendirilmiş bir div'a sarmak ve girişin input { visibility: hidden; }"devre dışı bırakıldığında" ayarlanmasıdır . .
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

Yukarıdaki snippet'te uygulanan devre dışı stil, Chrome kullanıcı arayüzünden alınır ve diğer tarayıcılardaki devre dışı girişlerle görsel olarak aynı olmayabilir. Muhtemelen motora özgü CSS uzantısı ön düzeltmeleri kullanılarak tek tek tarayıcılar için özelleştirilebilir. Bir bakışta, bunun olabileceğini düşünmüyorum:
Microsoft CSS uzantıları , Mozilla CSS uzantıları , WebKit CSS uzantıları

Bir ek değer tanıtmak çok daha mantıklı görünüyor visibility: disabledveya display: disabledhatta belki appearance: disabled, göz önüne alındığında visibility: hiddenzaten etkileyen davranış uygulanabilir elementlerin tüm ilişkili denetim elemanları arasında.