CSS kullanarak bir girdinin içinde metin olup olmadığını tespit edin - ziyaret ettiğim ve kontrol etmediğim bir sayfada?

Bir girdinin içinde CSS aracılığıyla metin olup olmadığını tespit etmenin bir yolu var mı? Ben kullanarak denedim :emptysözde sınıfı, ben kullanarak denedim [value=""], ikisi de çalıştı. Buna tek bir çözüm bulamıyorum.

Ne için sözde sınıfları dikkate alınarak, bu mümkün olmalıdır hayal :checkedve :indeterminatenazik benzer şey, her ikisi de.

Lütfen dikkat: Bunu JavaScript kullanamayan bir "Şık" stil için yapıyorum .

Ayrıca, şıklığın kullanıcının kontrol etmediği sayfalarda kullanıldığını unutmayın.

Şık bunu yapamaz çünkü CSS bunu yapamaz. CSS'de <input>değer (ler) için hiç (sahte) seçici yoktur . Görmek:

• W3C seçici özelliği
• Mozilla / Firefox destekli seçiciler
• Çapraz tarayıcı, CSS3 destek tablosu

:emptySeçici tek çocuk düğümleri değil, girdi değerleri belirtmektedir.
[value=""] does işi; ama sadece başlangıç durumu için. Bunun nedeni, bir düğümün value özniteliğinin (CSS'nin gördüğü), düğümün value özelliğiyle aynı olmamasıdır (Kullanıcı veya DOM javascript tarafından değiştirilir ve form verileri olarak gönderilir).

Yalnızca başlangıç durumuna umurumda sürece, sen gerekir Bir userscript veya Greasemonkey komut dosyasını kullanın. Neyse ki bu zor değil. Aşağıdaki komut dosyası Chrome'da veya Greasemonkey veya Scriptish'in yüklü olduğu Firefox'ta veya kullanıcı metinlerini destekleyen herhangi bir tarayıcıda (IE hariç çoğu tarayıcıda) çalışır.

Bu jsBin sayfasında CSS sınırlarının artı javascript çözümünün demosuna bakın .

// ==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";
}

Her zamanki CSS uyarılarıyla ve HTML kodunun değiştirilip değiştirilemeyeceği mümkündür. Eklersenizrequired elemana niteliğini, daha sonra eleman maç olacak :invalidya :validkontrolün değer boş olup olmadığına göre. Elemanın bir valueniteliği yoksa (veya varsa value=""), kontrolün değeri başlangıçta boştur ve herhangi bir karakter (boşluk bile) girildiğinde boş kalır.

Misal:

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

Sözde sınıf :valid ve :invalidyalnızca Çalışma Taslak düzeyi CSS belgelerinde tanımlanır, ancak IE'de IE 10 ile birlikte gelmesi dışında destek tarayıcılarda oldukça yaygındır.

“Boş” yalnızca boşluklardan oluşan değerleri dahil etmek istiyorsanız, özelliği ekleyebilirsiniz pattern=.*\S.*.

Bir giriş kontrolünün boş olmayan bir değere sahip olup olmadığını doğrudan tespit etmek için (şu anda) hiçbir CSS seçici yoktur, bu yüzden yukarıda açıklandığı gibi dolaylı olarak yapmamız gerekir.

Genel olarak, CSS seçicileri , kullanıcı eylemlerinden ziyade komut dosyası (set tarafı JavaScript) ile ayarlandığı gibi işaretleme veya bazı durumlarda öğe özelliklerine başvurur . Örneğin, :emptyöğeyi işaretlemede boş içerikle eşleştirir; tüm inputunsurlar bu anlamda kaçınılmaz olarak boştur. Seçici [value=""], öğenin valueişaretlemede özniteliğe sahip olup olmadığını ve değer olarak boş dizeye sahip olup olmadığını test eder . Ve :checkedve :indeterminatebenzeri şeylerdir. Gerçek kullanıcı girdilerinden etkilenmezler.

:placeholder-shownYalancı sınıfı kullanabilirsiniz . Teknik olarak bir yer tutucu gereklidir, ancak bunun yerine bir boşluk kullanabilirsiniz.

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);" />

ve

input[value=""]

çalışacak :-)

düzenleme: http://jsfiddle.net/XwZR2/

Temel olarak herkesin aradığı:

AZ:

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

Saf 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;}

placeholderNumarayı yukarıda yazılı olmadan kullanabilirsinizrequired alanını .

İle ilgili sorun required şey yazdığınızda, daha sonra sildiğinizde - giriş artık HTML5 spesifikasyonunun bir parçası olarak her zaman kırmızı olacaktır - o zaman düzeltmek / geçersiz kılmak için yukarıda yazıldığı gibi bir CSS'ye ihtiyacınız olacaktır.

Basit bir şey yapmadan yapabilirsiniz 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;
}

Kod kalemi: https://codepen.io/arlevi/pen/LBgXjZ

Basit css:

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

Giriş doldurulursa bu kod sayfa yüklemesinde verilen css'yi uygulayacaktır.

Yer input[type=text]tutucuyu şekillendirerek girdinin metne sahip olup olmamasına bağlı olarak farklı stil uygulayabilirsiniz. Bu, bu noktada resmi bir standart değildir, ancak farklı ön eklerle birlikte geniş tarayıcı desteğine sahiptir:

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

Örnek: http://fiddlesalad.com/scss/input-placeholder-css

JS ve CSS kullanma: yalancı sınıf değil

 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="" />

   

Yer tutucudan yararlanabilir ve şunları kullanabilirsiniz:

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

Geçerli selektör hile olacaktır.

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

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

JQuery ve CSS ile Basit Hile Şöyle:

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 bölümünde böyle yapın:

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

Gerekli parametre, geçerli olması için giriş alanında metin olmasını gerektirir.

Evet! bunu değer seçicili basit temel özellik ile yapabilirsiniz.

Boş değerli öznitelik seçiciyi kullanma ve özellikleri uygulama input[value='']

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

Bu css ile mümkün değildir. Bunu uygulamak için JavaScript kullanmanız gerekir (örn. $("#input").val() == "").