내가 방문한 페이지에서 CSS를 사용하여 입력 내용에 텍스트가 있는지 감지합니다.

CSS를 통해 입력에 텍스트가 있는지 여부를 감지하는 방법이 있습니까? 나는 :empty의사 클래스를 사용해 보았지만 [value=""]어느 것도 효과가 없었습니다. 이것에 대한 단일 해결책을 찾지 못하는 것 같습니다.

에 대한 의사 클래스가 :checked있으며 :indeterminate, 둘 다 비슷한 종류의 것을 고려하면 이것이 가능해야한다고 생각합니다 .

참고 : JavaScript를 사용할 수없는 "스타일리쉬 한 스타일"을 위해이 작업을 수행하고 있습니다.

또한 Stylish는 사용자가 제어하지 않는 페이지에서 클라이언트 쪽에서 사용됩니다.

CSS는 이것을 할 수 없기 때문에 스타일리쉬 는 이것을 할 수 없습니다. CSS에는 <input>값에 대한 (의사) 선택기가 없습니다 . 보다:

• W3C 선택기 사양
• Mozilla / Firefox 지원 선택기
• 크로스 브라우저, CSS3 지원 테이블

:empty선택은 자식 노드가 아닌 입력 값을 의미한다.
[value=""] 작동 합니다; 그러나 초기 상태에 대해서만 . 이 노드의 때문입니다 value 속성 (CSS가 보는 것을), 노드의 동일하지 않습니다 value 재산 (사용자 또는 DOM의 자바 스크립트에 의해 변경, 양식 데이터로 제출).

초기 상태 만 신경 쓰지 않으면 사용자 스크립트 또는 Greasemonkey 스크립트 를 사용해야합니다 . 다행히도 이것은 어렵지 않습니다. 다음 스크립트는 Chrome, Greasemonkey 또는 Scriptish가 설치된 Firefox 또는 사용자 스크립트를 지원하는 모든 브라우저 (IE를 제외한 대부분의 브라우저)에서 작동합니다.

이 jsBin 페이지 에서 CSS의 한계와 자바 스크립트 솔루션의 데모를보십시오 .

// ==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 경고와 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>

의사-분류 :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 사용 : 의사 클래스 아님

 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() == "".