Phát hiện nếu một đầu vào có văn bản trong đó bằng CSS - trên trang tôi đang truy cập và không kiểm soát?

Có cách nào để phát hiện xem một đầu vào có văn bản trong đó thông qua CSS không? Tôi đã thử sử dụng lớp :emptygiả, và tôi đã thử sử dụng [value=""], cả hai đều không hoạt động. Tôi dường như không thể tìm thấy một giải pháp duy nhất cho việc này.

Tôi tưởng tượng điều này phải có thể, vì chúng tôi có các lớp giả cho :checked, và :indeterminate, cả hai đều là loại tương tự.

Xin lưu ý: Tôi đang làm điều này theo phong cách "Phong cách" , không thể sử dụng JavaScript.

Cũng lưu ý rằng, Kiểu được sử dụng, phía máy khách, trên các trang mà người dùng không kiểm soát.

Sành điệu không thể làm điều này vì CSS không thể làm điều này. CSS không có bộ chọn (giả) cho <input>giá trị (s). Xem:

• Thông số bộ chọn W3C
• Các bộ chọn hỗ trợ Mozilla / Firefox
• Trình duyệt chéo, bảng hỗ trợ CSS3

Bộ :emptychọn chỉ tham chiếu đến các nút con, không phải giá trị đầu vào.
[value=""] không làm việc; Nhưng chỉ cho trạng thái ban đầu . Điều này là do một nút value thuộc tính (mà CSS thấy), không giống như của nút value bất động sản (thay đổi bởi người dùng hoặc DOM javascript, và gửi theo mẫu dữ liệu).

Trừ khi bạn chỉ quan tâm đến trạng thái ban đầu, bạn phải sử dụng tập lệnh usercript hoặc Greasemonkey. May mắn là điều này không khó. Tập lệnh sau sẽ hoạt động trong Chrome hoặc Firefox có cài đặt Greasemonkey hoặc Scriptish hoặc trong bất kỳ trình duyệt nào hỗ trợ mô tả người dùng (ví dụ: hầu hết các trình duyệt, ngoại trừ IE).

Xem bản giới thiệu về các giới hạn của CSS cộng với giải pháp javascript tại trang jsBin này .

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

Có thể, với các cảnh báo CSS thông thường và nếu mã HTML có thể được sửa đổi. Nếu bạn thêm requiredthuộc tính cho phần tử, thì phần tử đó sẽ khớp :invalidhoặc :validtùy theo giá trị của điều khiển có trống hay không. Nếu phần tử không có valuethuộc tính (hoặc nó có value=""), giá trị của điều khiển ban đầu trống và trở nên không trống khi bất kỳ ký tự nào (thậm chí là khoảng trắng) được nhập.

Thí dụ:

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

Loại giả :validvà :invalidchỉ được xác định trong các tài liệu CSS cấp Dự thảo, nhưng hỗ trợ khá phổ biến trong các trình duyệt, ngoại trừ trong IE, nó đi kèm với IE 10.

Nếu bạn muốn làm cho trống rỗng, bao gồm các giá trị chỉ bao gồm các khoảng trắng, bạn có thể thêm thuộc tính pattern=.*\S.*.

(Hiện tại) không có bộ chọn CSS để phát hiện trực tiếp liệu điều khiển đầu vào có giá trị không trống hay không, vì vậy chúng ta cần thực hiện gián tiếp, như được mô tả ở trên.

Nói chung, các bộ chọn CSS đề cập đến đánh dấu hoặc, trong một số trường hợp, thuộc tính phần tử như được đặt với tập lệnh (JavaScript phía máy khách), thay vì hành động của người dùng. Ví dụ: :emptykhớp phần tử với nội dung trống trong đánh dấu; tất cả các inputyếu tố là không thể tránh khỏi trống rỗng trong ý nghĩa này. Bộ chọn [value=""]kiểm tra xem phần tử có valuethuộc tính trong đánh dấu và có chuỗi rỗng làm giá trị của nó không. Và :checkedvà :indeterminatenhững điều tương tự. Họ không bị ảnh hưởng bởi đầu vào người dùng thực tế.

Bạn có thể sử dụng :placeholder-shownlớp giả. Về mặt kỹ thuật, cần có một trình giữ chỗ, nhưng bạn có thể sử dụng một khoảng trắng để thay thế.

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

và

input[value=""]

sẽ làm việc :-)

chỉnh sửa: http://jsfiddle.net/XwZR2/

Về cơ bản những gì mọi người đang tìm kiếm là:

ÍT HƠN:

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 thuần túy:

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

Bạn có thể sử dụng placeholderthủ thuật như được viết ở trên trường w / o required.

Vấn đề requiredlà khi bạn viết một cái gì đó, sau đó xóa nó - đầu vào bây giờ sẽ luôn có màu đỏ như một phần của thông số HTML5 - thì bạn sẽ cần một CSS như được viết ở trên để sửa / ghi đè lên nó.

Bạn có thể làm điều đơn giản 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;
}

Bút mã: https://codepen.io/arlevi/pen/LBgXjZ

Css đơn giản:

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

Mã này sẽ áp dụng css đã cho khi tải trang nếu đầu vào được lấp đầy.

Bạn có thể định kiểu input[type=text]khác nhau tùy thuộc vào việc đầu vào có văn bản hay không bằng cách tạo kiểu giữ chỗ. Đây không phải là một tiêu chuẩn chính thức tại thời điểm này nhưng có hỗ trợ trình duyệt rộng, mặc dù với các tiền tố khác nhau:

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

Ví dụ: http://fiddlesalad.com/scss/input-placeholder-css

Sử dụng JS và CSS: không phải giả

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

   

Bộ chọn hợp lệ sẽ thực hiện thủ thuật.

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

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

Bạn có thể tận dụng trình giữ chỗ và sử dụng:

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

Thủ thuật đơn giản với jQuery và CSS Giống như vậy:

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

làm điều đó trên phần HTML như thế này:

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

Tham số bắt buộc sẽ yêu cầu nó phải có văn bản trong trường đầu vào để hợp lệ.

Đúng! bạn có thể làm điều đó với thuộc tính cơ bản đơn giản với bộ chọn giá trị.

Sử dụng bộ chọn thuộc tính với giá trị trống và áp dụng thuộc tính input[value='']

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

Điều này là không thể với css. Để thực hiện điều này, bạn sẽ phải sử dụng JavaScript (ví dụ $("#input").val() == "").