ฉันจะปิดใช้งานเขตข้อมูลฟอร์มโดยใช้ CSS ได้อย่างไร

เป็นไปได้หรือไม่ที่จะปิดการใช้งานเขตข้อมูลฟอร์มโดยใช้ CSS? แน่นอนฉันรู้เกี่ยวกับคุณลักษณะที่ปิดใช้งาน แต่มันเป็นไปได้ที่จะระบุสิ่งนี้ในกฎ CSS? สิ่งที่ต้องการ -

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

เหตุผลที่ฉันถามก็คือฉันมีแอปพลิเคชันที่มีเขตข้อมูลแบบอัตโนมัติและฟิลด์ถูกซ่อน / แสดงตามกฎบางอย่าง (ซึ่งทำงานใน Javascript) ตอนนี้ฉันต้องการขยายเพื่อรองรับการปิด / เปิดใช้งานเขตข้อมูล แต่วิธีการเขียนกฎเพื่อจัดการคุณสมบัติสไตล์ของเขตข้อมูลฟอร์มโดยตรง ดังนั้นตอนนี้ฉันต้องขยายเครื่องมือกฎเพื่อเปลี่ยนคุณสมบัติรวมถึงสไตล์ของเขตข้อมูลฟอร์มและอย่างใดก็ดูเหมือนน้อยกว่าอุดมคติ

เป็นเรื่องแปลกมากที่คุณมองเห็นและแสดงคุณสมบัติใน CSS แต่ไม่เปิด / ปิดการใช้งาน มีอะไรที่เหมือนในมาตรฐาน HTML5 ที่ยังทำงานไม่ได้หรือแม้แต่บางอย่างที่ไม่ได้มาตรฐาน (เฉพาะเบราว์เซอร์)?

สิ่งนี้มีประโยชน์:

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

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

ปรับปรุง:

และหากต้องการปิดการใช้งานจากดัชนีแท็บคุณสามารถใช้วิธีนี้ได้:

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

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

คุณสามารถปลอมผลกระทบที่ปิดการใช้งานโดยใช้ CSS

pointer-events:none;

คุณอาจต้องการเปลี่ยนสีเป็นต้น

เนื่องจากกฎกำลังทำงานใน JavaScript ทำไมไม่ปิดใช้งานโดยใช้ javascript (หรือในกรณีตัวอย่างของฉัน jQuery)

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

UPDATE

attrฟังก์ชั่นไม่เป็นวิธีการหลักในการนี้เป็นที่ชี้ให้เห็นในความคิดเห็นด้านล่าง สิ่งนี้จะเสร็จสิ้นด้วยpropฟังก์ชั่น

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

เป็นเรื่องแปลกมากที่คุณมองเห็นและแสดงคุณสมบัติใน CSS แต่ไม่เปิด / ปิดการใช้งาน

มันแปลกมากที่คุณคิดว่ามันแปลกมาก คุณเข้าใจผิดวัตถุประสงค์ของ CSS CSS ไม่ได้หมายถึงการเปลี่ยนพฤติกรรมขององค์ประกอบแบบฟอร์ม มันหมายถึงการเปลี่ยนสไตล์ของพวกเขาเท่านั้น การซ่อนช่องข้อความไม่ได้หมายความว่าช่องข้อความจะไม่อยู่ที่นั่นอีกต่อไปหรือเบราว์เซอร์จะไม่ส่งข้อมูลเมื่อคุณส่งแบบฟอร์ม ทั้งหมดจะซ่อนจากสายตาของผู้ใช้

หากต้องการปิดใช้งานเขตข้อมูลของคุณจริงคุณต้องใช้disabledแอตทริบิวต์ใน HTML หรือdisabledคุณสมบัติ DOM ใน JavaScript

คุณไม่สามารถใช้ CSS เพื่อปิดการใช้งานกล่องข้อความ โซลูชันจะเป็นแอตทริบิวต์ HTML

disabled="disabled"

วิธีแก้ปัญหาในทางปฏิบัติคือการใช้ CSS เพื่อซ่อนอินพุตจริง

ในการสรุปสิ่งนี้คุณสามารถเขียนอินพุต html สองรายการสำหรับอินพุตจริง (เปิดใช้งานหนึ่งรายการและปิดใช้งานหนึ่งรายการ) จากนั้นใช้จาวาสคริปต์เพื่อควบคุม CSS เพื่อแสดงและซ่อนไว้

ครั้งแรกที่ตอบคำถามและดูเหมือนจะสายไปสักหน่อย ...

ฉันเห็นด้วยที่จะทำมันด้วยจาวาสคริปต์หากคุณใช้งานไปแล้ว

สำหรับโครงสร้างคอมโพสิตเช่นฉันมักจะใช้ฉันได้ทำ css หลอกหลังจากองค์ประกอบเพื่อป้องกันองค์ประกอบจากการมีปฏิสัมพันธ์ของผู้ใช้และอนุญาตให้จัดแต่งทรงผมโดยไม่ต้องจัดการโครงสร้างทั้งหมด

ตัวอย่างเช่น:

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

ฉันสามารถวางdisabledชั้นเรียนบนห่อdiv

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

นี่จะเป็นข้อความสีเทาภายในdivและทำให้ผู้ใช้ไม่สามารถใช้งานได้

ตัวอย่าง JSFiddle ของฉัน

ฉันมักจะใช้:

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

จากนั้นใช้คลาส css กับฟิลด์อินพุต:

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

อินพุต [name = ชื่อผู้ใช้] {ปิดใช้งาน: จริง /* ไม่ทำงาน, ไม่เป็นผล */ }

ฉันรู้ว่าคำถามนี้ค่อนข้างเก่า แต่สำหรับผู้ใช้รายอื่นที่พบปัญหานี้ฉันคิดว่าวิธีที่ง่ายที่สุดในการปิดใช้งานการป้อนข้อมูลคือเพียงโดย ': ปิดใช้งาน'

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

ในความเป็นจริงถ้าคุณมีสคริปต์ที่จะปิดการใช้งานการป้อนข้อมูลแบบไดนามิก / โดยอัตโนมัติด้วย javascript หรือ jquery ที่จะปิดการใช้งานโดยอัตโนมัติตามเงื่อนไขที่คุณเพิ่ม

ใน jQuery สำหรับตัวอย่าง:

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

หวังว่าคำตอบใน CSS จะช่วยได้

คุณไม่สามารถทำสิ่งที่ฉันกลัวได้ แต่คุณสามารถทำสิ่งต่อไปนี้ใน jQuery หากคุณไม่ต้องการเพิ่มคุณสมบัติลงในฟิลด์ เพียงวางสิ่งนี้ไว้ใน<head></head>แท็กของคุณ

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

หากคุณกำลังสร้างฟิลด์ใน DOM (ด้วย JS) คุณควรทำสิ่งนี้แทน:

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

สามารถทำได้เพื่อวัตถุประสงค์ที่ไม่สำคัญโดยการวางซ้อนทับด้านบนขององค์ประกอบการป้อนข้อมูลของคุณ นี่คือตัวอย่างของฉันใน HTML บริสุทธิ์และ CSS

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>

ไม่มีวิธีใช้ CSS สำหรับจุดประสงค์นี้ คำแนะนำของฉันคือการรวมรหัสจาวาสคริปต์ที่คุณกำหนดหรือเปลี่ยนคลาส CSS ที่ใช้กับอินพุต อะไรแบบนั้น :

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;โซลูชันที่แก้ไขปัญหาของอินพุตที่ยังคงสามารถเข้าถึงได้ผ่านทางตัวควบคุมหรือแท็บแท็บคือการตัดอินพุตใน div ซึ่งถูกจัดรูปแบบเป็นอินพุตข้อความที่ปิดใช้งานและการตั้งค่าinput { visibility: hidden; }เมื่ออินพุตถูก "ปิดใช้งาน" .
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>

สไตล์ที่ปิดใช้งานที่นำไปใช้ในตัวอย่างด้านบนนั้นนำมาจาก Chrome UI และอาจไม่เหมือนกับภาพอินพุตที่ปิดใช้งานในเบราว์เซอร์อื่น อาจเป็นไปได้ที่จะสามารถปรับแต่งสำหรับแต่ละเบราว์เซอร์โดยใช้ส่วนขยาย CSS เฉพาะเครื่องยนต์ - คำนำหน้า แม้ว่าภาพรวมฉันไม่คิดว่าจะทำได้:
ส่วนขยาย CSS ของ Microsoft , ส่วนขยายMozilla CSS , ส่วนขยายWebKit CSS

มันจะดูเหมือนไกลที่เหมาะสมมากขึ้นที่จะแนะนำมูลค่าเพิ่มvisibility: disabledหรือdisplay: disabledหรือบางทีก็appearance: disabledให้ที่visibility: hiddenอยู่แล้วมีผลกระทบต่อพฤติกรรมขององค์ประกอบที่บังคับควบคุมองค์ประกอบที่เกี่ยวข้องใด ๆ