Визначте, чи вхід містить текст у ньому за допомогою CSS - на сторінці, яку я відвідую, і не контролюю?


187

Чи є спосіб виявити, чи вхід містить текст у ньому за допомогою CSS? Я намагався використовувати :emptyпсевдоклас, і я намагався використовувати [value=""], жоден з яких не працював. Я не можу знайти єдиного рішення для цього.

Я думаю, що це повинно бути можливим, враховуючи, що у нас є псевдокласи :checked, і :indeterminateобидва вони подібні.

Зверніть увагу: я роблю це для стильного стилю , який не може використовувати JavaScript.

Також зауважте, що стильний використовується на стороні клієнта на сторінках, які користувач не контролює.


Я не впевнений у способі зробити це за допомогою CSS (який все одно не оновлюється). Однак це легко за допомогою JavaScript.
ralph.m

Я не думаю, що я можу використовувати JavaScript. Я працюю над «стильним» стилем. Досить впевнений, що це потрібно робити повністю з CSS. Якщо він не оновлюється, коли користувач вводить текст, я думаю, це тоді є марною тратою часу. Не думав про це. Хм. Принаймні, це не критично важливо для стилю, це лише вибагливість, яку я сподівався додати.
JacobTheDev

Відповіді:


66

Стильний не може цього зробити, оскільки CSS не може цього зробити. У CSS немає (псевдо) селекторів для <input>значень. Побачити:

:emptyСелектор відноситься тільки до дочірніх вузлів, а НЕ вхідних значень.
[value=""] чи працює; але лише для початкового стану. Це тому, що value атрибут вузла (який бачить CSS) не є тим самим, як у вузлаvalue властивістю (Змінено javascript користувачем або DOM та подано у вигляді даних форми).

Якщо вас не хвилює лише початковий стан, ви повинні використовувати сценарій користувача або скрипт Greasemonkey. На щастя, це не важко. Наступний сценарій буде працювати в Chrome або Firefox із встановленою Greasemonkey або Scriptish, або в будь-якому браузері, що підтримує сценарії користувачів (тобто більшість браузерів, крім IE).

Перегляньте демонстрацію меж CSS плюс рішення javascript на цій сторінці 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";
}

Я перегляну цю тему, що стосується сценарію. Дякую.
JacobTheDev

@MartinGottweis, але не у випадку з ОП це не так. Це [стильне] питання.
Брок Адамс

1
@BrockAdams, op каже, що він не може використовувати JavaScript, тому опція: допустимий варіант - це шлях. Я щось пропускаю?
Мартін Готвейс

1
@MartinGottweis, :validопція вимагає перезапис сторінки - це те, що ОП не може зробити зі Стильним, і жоден з інших відповідей взагалі не відображається в контексті перегляду. Користувач не контролює сторінку, яку він відвідує.
Брок Адамс

265

Можливо, за допомогою звичайних застережень 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подібні речі. На них не впливає фактичне введення користувача.


7
Це чудове рішення, якщо і лише якщо потрібно ввести кожен вхід - якщо ні, то ви потрапляєте в ситуацію, коли у вас є порожнє, але дійсне поле введення, яке не впливає на недійсний стиль . JS, мабуть, переможець у цьому рішенні
AdamSchuld

7
це брудно, але дивно розумно. Не вирішення питання, але я впевнений, що зробив для мене трюк
січня

1
Брудне рішення. Зауважте, що це може спричинити проблеми із автоматичним заповненням у Chrome, якщо ви спробуєте додати логіку відображення міток на основі цього АБО, якщо введення насправді не потрібно, і форма має перевірку на основі цього
Artjom Kurapov

1
Семантично це неправильно. Як було сказано в попередніх коментарях, деякі введення можуть бути необов’язковими, а requiredатрибут може перешкоджати надсиланню форми.
zhenming

1
Доданий novalidateатрибут на <form>елементі, щоб не турбуватися про червоний дисплей, коли поле порожнє після заповнення один раз:<form ... novalidate> <input ... required /> </form>
Алкалін

228

Можна використовувати :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=" " />


10
Це, на жаль, не підтримується IE або Firefox. Джерело: caniuse.com/#feat=css-placeholder-shown
Шон Доусон

2
Дивовижна відповідь. Підтримка браузера відстійна, але якщо поліфіл вийде для :placeholder-shownцього, це має стати прийнятою відповіддю. requiredМетод не бере до уваги випадків бахроми. Слід зазначити, що ви можете передати простір для заповнювача, і цей спосіб все одно буде працювати. Кудос.
corysimmons

5
Інший недолік цього - вам, здається, потрібно фактично мати заповнювач. Іншими словами, input:not(:placeholder-shown)завжди буде відповідати, <input/>навіть якщо немає значення.
redbmk

5
Для мене це працює в Chrome, Firefox та Safari. Не в IE11.
J0ANMM

1
@redbmk, як згадується corysimmons, Слід зазначити, що ви можете передати простір для заповнювача, і цей метод все одно буде працювати.
Naeem Baghi

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

і

input[value=""]

буду працювати :-)

редагувати: http://jsfiddle.net/XwZR2/


24
Це CSS? Це схоже на HTML та Javascript (але я можу помилитися).
jww

Брук Адамс писав: [value = ""] працює; але лише для початкового стану. Це тому, що атрибут значення вузла (який бачить CSS) не є таким самим, як властивість значення вузла (Змінено користувачем або DOM javascript і подається як дані форми). -> Магія полягає в тому, щоб оновити атрибут значення щодо змін: jsfiddle.net/XwZR2
Tom D.

2
@ JánosWeisz ні, це не буде. Цей обробник буде встановлений до того, як сценарій зможе маніпулювати цим елементом, і він може працювати разом з обробником, доданим з addEventListener.
Дінобоф

1
Очевидно, що onkeyup піклується лише про введення клавіатури. Однак не забувайте, що ви можете вставити текст у поле введення за допомогою миші. Спробуйте: Скопіюйте текст у буфер обміну, а потім клацніть правою кнопкою миші на введенні та натисніть Вставити. Слідкуйте за тим, щоб CSS не працював. Те саме з перетягуванням тексту у поле введення мишкою.
белуга

4
input[value]:not([value=""])- краще. Дякую всім. codepen.io/iegik/pen/ObZpqo
iegik

29

В основному все, що шукає, це:

МЕНШЕ:

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

1
Ви, очевидно, просто використали робоче рішення, і ви отримали 0 голосів WaT?
ProNOOB

5
Дивовижна відповідь. Псевдоклас: показаний заповнювачем, не працює в IE або Edge, тому це не повне рішення. Однак це проклято близько, і це змушує мене вбити Edge за те, що не підтримую. IE я міг би прийняти, але Edge? Хай Microsoft!
Аарон Мартін-Колбі

2
Це не чисте рішення css, якщо вам потрібно додати "потрібно" до свого html
user1566694

Дякую, добрий пане, я щиро сподіваюся, що це зросте вище, оскільки, на мою думку, саме цього хочуть більшість людей.
sivi911

19

Ви можете використовувати 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


1
Цей підхід був ідеально підходить для мого випадку використання. У мене в будь-якому випадку були фільтри пошуку, у яких були заповнювачі, і я хотів, щоб рамка поля введення була виділена, коли значення було присутнє.
Стівен Таттлібі

9

Простий css:

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

Цей код буде застосовано заданий css для завантаження сторінки, якщо вхід заповнений.


9
Це працює лише при завантаженні сторінки. Не динамічне введення значення.
Бен Рачикот

Питання щодо завантаження сторінки має бути чітко зазначено для цієї відповіді.
Брайс Снайдер

6

Ви можете стилізувати по- 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


FYI, це надійно форматує заповнювач, але тільки сам заповнювач. Це дає вам ілюзію зміни кольору тексту, але це вже так, лише за замовчуванням сірий та чорний.
Джон Вайш

Весь CSS - це дешева ілюзія, ви змінюєте лише зовнішній вигляд, не впливаючи на фактичний зміст :-)
vbraun

Це саме те, що мені було потрібно. Я вимагав, щоб введення змінило стилі, якщо в ньому був текст, оскільки дизайн для заповнення місця відрізняється від стилю введення. Ідеально!
Крістофер Маршалл

Це працює для фонів, але не для кордонів. Я не надто глибоко копався, намагаючись змінити кордон.
majinnaibu

5

Використання 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="" />

   



3

Ви можете скористатись заповнювачем та використовувати:

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

1

Простий трюк з 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;
    }

1

зробіть це в частині HTML так:

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

Необхідний параметр вимагає, щоб у полі введення був текст, щоб бути дійсним.


Це не допомагає визначити, чи вхід містить текст у ньому за допомогою CSS, про що йшлося.
Jukka K. Korpela

Вибачте, це насправді допомагає ... Це дає можливість використовувати псевдокласи, як пояснено у моїй відповіді.
Jukka K. Korpela

1
Це стильне запитання - це означає, що ОП не може контролювати або змінювати цільову сторінку. Він бачить лише сторінку клієнта.
Брок Адамс

3
Це було дуже корисно, ось приклад того, про що говорить Xedret
tolmark

****** <необхідний ввід> && input: дійсний {...} ******
FremyCompany

0

Так! ви можете зробити це за допомогою простого базового атрибута з селектором значень.

Використовуйте селектор атрибутів із порожнім значенням та застосуйте властивості input[value='']

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

-6

Це неможливо за допомогою css. Для цього вам доведеться використовувати JavaScript (наприклад $("#input").val() == "").


2
Я знаю, як це зробити, мені потрібно це зробити з CSS. Будь ласка, прочитайте коментарі до оригінальної публікації. Я будую "стильний" стиль, який не може використовувати JavaScript, наскільки мені відомо.
JacobTheDev
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.