ตรวจพบว่าอินพุตมีข้อความอยู่ในนั้นโดยใช้ CSS - บนหน้าที่ฉันกำลังเยี่ยมชมและไม่ได้ควบคุม?

มีวิธีตรวจสอบว่าอินพุตมีข้อความอยู่ใน CSS หรือไม่ ฉันลองใช้:emptyคลาสหลอกและฉันลองใช้[value=""]แล้วใช้ไม่ได้ผล ฉันไม่สามารถหาวิธีแก้ไขปัญหานี้ได้

ฉันคิดว่าสิ่งนี้จะต้องเป็นไปได้โดยพิจารณาว่าเรามีคลาสหลอกสำหรับ:checkedและ:indeterminateทั้งสองอย่างนี้เป็นสิ่งที่คล้ายกัน

โปรดทราบ: ฉันกำลังทำสิ่งนี้ในสไตล์ "มีสไตล์"ซึ่งไม่สามารถใช้ JavaScript ได้

โปรดทราบว่ามีการใช้ Stylish, ฝั่งไคลเอ็นต์ในหน้าเว็บที่ผู้ใช้ไม่ได้ควบคุม

มีสไตล์ไม่สามารถทำได้เพราะ CSS ไม่สามารถทำเช่นนี้ CSS ไม่มีตัวเลือก (หลอก) สำหรับ<input>ค่า ดู:

• ข้อมูลจำเพาะตัวเลือก W3C
• ตัวเลือกที่รองรับ Mozilla / Firefox
• ตารางสนับสนุนข้ามเบราว์เซอร์ CSS3

:emptyเลือกหมายถึงเฉพาะโหนดลูกไม่ได้ค่าที่ป้อนเข้า
[value=""] ไม่ทำงาน แต่สำหรับสถานะเริ่มต้นเท่านั้น นี่เป็นเพราะvalue แอตทริบิวต์ของโหนด(CSS นั้นเห็น) ไม่เหมือนกับvalue คุณสมบัติของโหนด(เปลี่ยนโดยผู้ใช้หรือจาวาสคริปต์ DOM และส่งเป็นข้อมูลแบบฟอร์ม)

หากคุณไม่สนใจสถานะเริ่มต้นเท่านั้นคุณต้องใช้สคริปต์ผู้ใช้หรือสคริปต์ Greasemonkey โชคดีที่มันไม่ยาก สคริปต์ต่อไปนี้จะทำงานใน Chrome หรือ Firefox ที่ติดตั้ง Greasemonkey หรือ Scriptish หรือในเบราว์เซอร์ที่รองรับ userscripts (เช่นเบราว์เซอร์ส่วนใหญ่ยกเว้น IE)

ดูการสาธิตของข้อ จำกัด ของวิธีการแก้ CSS บวกจาวาสคริปต์ที่ที่หน้า jsBin นี้

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

เป็นไปได้ด้วย CSS caveats ปกติและหากสามารถแก้ไขโค้ด HTML ได้ หากคุณเพิ่มrequiredคุณสมบัติให้กับองค์ประกอบองค์ประกอบนั้นจะจับคู่:invalidหรือ:validเป็นไปตามค่าของการควบคุมว่างเปล่าหรือไม่ หากองค์ประกอบนั้นไม่มีvalueแอตทริบิวต์ (หรือมีvalue="") ค่าของการควบคุมจะว่างเปล่าในตอนแรกและจะไม่ว่างเปล่าเมื่อมีการป้อนอักขระใด ๆ (แม้แต่ช่องว่าง)

ตัวอย่าง:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

pseudo-classed :validและ:invalidถูกกำหนดในเอกสาร CSS ระดับร่างทำงานเท่านั้น แต่การสนับสนุนค่อนข้างแพร่หลายในเบราว์เซอร์ยกเว้นใน IE นั้นมาพร้อมกับ IE 10

หากคุณต้องการให้รวมค่าที่ว่างของช่องว่างเท่านั้นคุณสามารถเพิ่มแอททริบิวต์pattern=.*\S.*ได้

มี (ในปัจจุบัน) ไม่มีตัวเลือก CSS สำหรับการตรวจสอบโดยตรงว่าตัวควบคุมอินพุตมีค่าที่ไม่ว่างเปล่าหรือไม่ดังนั้นเราจึงต้องดำเนินการทางอ้อมดังที่อธิบายไว้ข้างต้น

โดยทั่วไปตัวเลือก CSS อ้างถึงมาร์กอัปหรือในบางกรณีถึงคุณสมบัติองค์ประกอบตามที่กำหนดด้วยการเขียนสคริปต์ (JavaScript ฝั่งไคลเอ็นต์) แทนที่จะเป็นการกระทำของผู้ใช้ ตัวอย่างเช่น:emptyจับคู่องค์ประกอบที่มีเนื้อหาว่างในมาร์กอัป inputองค์ประกอบทั้งหมดจะว่างเปล่าอย่างหลีกเลี่ยงไม่ในแง่นี้ ตัวเลือก[value=""]ทดสอบว่าองค์ประกอบมีvalueคุณสมบัติเป็นมาร์กอัปและมีสตริงที่ว่างเปล่าเป็นค่าหรือไม่ และ:checkedและ:indeterminateมีสิ่งที่คล้ายกัน พวกเขาจะไม่ได้รับผลกระทบจากการป้อนข้อมูลของผู้ใช้จริง

คุณสามารถใช้:placeholder-shownคลาสหลอก ในทางเทคนิคต้องมีตัวยึดตำแหน่ง แต่คุณสามารถใช้ช่องว่างแทน

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

<input onkeyup="this.setAttribute('value', this.value);" />

และ

input[value=""]

จะทำงาน :-)

แก้ไข: http://jsfiddle.net/XwZR2/

โดยทั่วไปสิ่งที่ทุกคนกำลังมองหาคือ:

หัก

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

CSS บริสุทธิ์:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

คุณสามารถใช้placeholderเคล็ดลับตามที่เขียนไว้ข้างต้นโดยไม่มีrequiredฟิลด์

ปัญหาrequiredคือเมื่อคุณเขียนบางอย่างแล้วลบออก - ตอนนี้ข้อมูลจะเป็นสีแดงเป็นส่วนหนึ่งของสเป็ค HTML5 - คุณจะต้องใช้ CSS ตามที่เขียนไว้ด้านบนเพื่อแก้ไข / ลบล้างมัน

คุณสามารถทำสิ่งต่าง ๆ ได้โดยง่าย required

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

รหัสของปากกา: https://codepen.io/arlevi/pen/LBgXjZ

CSS อย่างง่าย:

input[value]:not([value=""])

รหัสนี้จะใช้ css ที่กำหนดในการโหลดหน้าหากป้อนข้อมูลเต็ม

คุณสามารถจัดรูปแบบinput[type=text]แตกต่างกันไปขึ้นอยู่กับว่าอินพุตมีข้อความหรือไม่โดยการกำหนดสไตล์ให้กับตัวยึดตำแหน่ง นี่ไม่ใช่มาตรฐานอย่างเป็นทางการ ณ จุดนี้ แต่มีการสนับสนุนเบราว์เซอร์ที่กว้าง แต่มีคำนำหน้าที่แตกต่างกัน:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

ตัวอย่าง: http://fiddlesalad.com/scss/input-placeholder-css

การใช้ JS และ CSS: ไม่ใช่ pseudoclass

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }

<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   

ตัวเลือกที่ถูกต้องจะทำเคล็ดลับ

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

คุณสามารถใช้ประโยชน์จากตัวยึดตำแหน่งและใช้:

input:not(:placeholder-shown) {
  border: 1px solid red;
}

เคล็ดลับง่ายๆกับ jQuery และ CSS ไลค์:

JQuery:

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS:

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }

ทำในส่วน HTML เช่นนี้:

<input type="text" name="Example" placeholder="Example" required/>

พารามิเตอร์ที่จำเป็นจะต้องมีข้อความในช่องใส่เพื่อให้ถูกต้อง

ใช่ คุณสามารถทำได้ด้วยแอ็ตทริบิวต์พื้นฐานอย่างง่ายพร้อมตัวเลือกค่า

ใช้ตัวเลือกแอททริบิวต์ที่มีค่าว่างและใช้คุณสมบัติ input[value='']

input[value=''] {
    background: red;
}

นี่เป็นไปไม่ได้กับ css ในการดำเนินการนี้คุณจะต้องใช้ JavaScript (เช่น$("#input").val() == "")