Détecter si une entrée contient du texte en utilisant CSS - sur une page que je visite et que je ne contrôle pas?
Existe-t-il un moyen de détecter si une entrée contient du texte via CSS? J'ai essayé d'utiliser la pseudo-classe :empty, et j'ai utilisé [value=""], qui n'a pas fonctionné. Je n'arrive pas à trouver une solution unique à ce problème.
J'imagine que cela doit être possible, étant donné que nous avons des pseudo-classes pour :checked et :indeterminate, qui sont en quelque sorte similaires.
Remarque: je fais cela pour un style "élégant", qui ne peut pas utiliser JavaScript.
Notez également que Stylish est utilisé côté client sur les pages que l'utilisateur ne contrôle pas.
Stylish ne peut pas faire cela car CSS ne le peut pas. CSS n'a pas de (pseudo) sélecteur pour <input> valeur (s). Voir:
Le sélecteur :empty fait uniquement référence aux nœuds enfants, pas aux valeurs d'entrée.[value=""] fonctionne ; mais uniquement pour l’état initial . Cela est dû au fait que l'attribut value du nœud (que CSS voit) n'est pas identique à la propriété value du nœud (modifié par l'utilisateur ou le javascript DOM et soumis en tant que données de formulaire).
, vous devez utiliser un script userscript ou Greasemonkey. Heureusement, n'est pas difficile. Le script suivant fonctionnera dans Chrome ou Firefox avec Greasemonkey ou Scriptish installé ou dans n’importe quel navigateur prenant en charge les scripts utilisateurs (c'est-à-dire la plupart des navigateurs, sauf IE).
Voir une démonstration des limites de CSS ainsi que de la solution javascript à l'adresse cette page 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";
}
C'est possible, avec les mises en garde CSS habituelles et si le code HTML peut être modifié. Si vous ajoutez l'attribut required à l'élément, l'élément correspondra à _:invalid_ ou _:valid_ selon que la valeur du contrôle est vide ou non. Si l'élément n'a pas d'attribut value (ou s'il a _value=""_), la valeur du contrôle est initialement vide et devient non vide lorsqu'un caractère (même un espace) est entré.
Exemple:
_<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
_Les pseudo-classes :valid et :invalid sont définies uniquement dans les documents CSS de niveau de travail, mais le support est plutôt répandu dans les navigateurs, sauf que dans IE, il est venu avec IE 10.
Si vous souhaitez que les valeurs d'inclusion "vides" soient composées uniquement d'espaces, vous pouvez ajouter l'attribut _pattern=.*\S.*_.
Il n'y a (actuellement) aucun sélecteur CSS permettant de détecter directement si un contrôle d'entrée a une valeur non vide, nous devons donc le faire indirectement, comme décrit ci-dessus.
En règle générale, les sélecteurs CSS font référence à balisage ou, dans certains cas, aux propriétés des éléments définies dans un script (JavaScript côté client), plutôt que des actions de l'utilisateur. Par exemple, _:empty_ correspond à l'élément avec un contenu vide dans le balisage; tous les éléments input sont inévitablement vides en ce sens. Le sélecteur _[value=""]_ vérifie si l'élément a l'attribut value dans le balisage et si la chaîne vide est sa valeur. Et _:checked_ et _:indeterminate_ sont des choses similaires. Ils ne sont pas affectés par les entrées de l'utilisateur.
Vous pouvez utiliser la pseudo-classe :placeholder-shown. Techniquement, un espace réservé est requis, mais vous pouvez utiliser un espace à la place.
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);" />
et
input[value=""]
marchera :-)
Ce que tout le monde cherche, c’est essentiellement:
MOINS:
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 pur:
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;}
Vous pouvez utiliser l'astuce placeholder comme indiqué ci-dessus sans le champ required.
Le problème avec required est que lorsque vous écrivez quelque chose, puis que vous le supprimez (l'entrée sera toujours rouge dans le cadre de la spécification HTML5), vous aurez alors besoin d'un CSS tel que décrit ci-dessus pour le corriger/le remplacer.
Vous pouvez faire quelque chose sans 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;
}
Stylo code: https://codepen.io/arlevi/pen/LBgXjZ
Css simple:
input[value]:not([value=""])
Ce code va appliquer le css donné si l'entrée est complète.
Vous pouvez styler input[type=text] différemment selon que l'entrée contient du texte ou non en modifiant le style de l'espace réservé. Ce n’est pas une norme officielle pour le moment, mais elle prend en charge un large navigateur, avec des préfixes différents:
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;
}
Utilisation de JS et CSS: pas de pseudo-classe
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="" />
Le sélecteur valide fera l'affaire.
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
Oui! vous pouvez le faire avec un attribut de base simple avec sélecteur de valeur.
Utilisez le sélecteur d'attribut avec une valeur vide et appliquez les propriétés
input[value='']
_input[value=''] {
background: red;
}
_faites-le sur la partie HTML comme ceci:
<input type="text" name="Example" placeholder="Example" required/>
Le paramètre requis nécessitera d'avoir du texte dans le champ de saisie pour être valide.
Simple Trick avec jQuery et CSS Like so:
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;
}